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本 书 全 面 讲 解 了 JavaScript 框 架设 计 及 相关 的 知 
识 ， 主 要 内 容 包 括 种 子 模块 、 语 言 模块 、 浏 览 器 咒 
探 与 特征 侦 测 、 类 工厂 、 选 择 右 引 敬 、 节 点 模块 、 
数据 绥 存 模块 、 样 式 模块 、 属 性 模块 、PC 端 和 移动 
谓 的 事件 系统 、jQuery 的 事件 系统 、 了 异步 模型 、 数 
据 交 互 模块 、 动 画 引 擎 、MVVM、 前 端 模板 〈 静 态 
模板 〉》、MVVM 的 动态 模板 、 性 能 载 与 复杂 墙 、 组 
件 、jQuery 时 代 的 组 件 方 案 、avalon2 的 组 件 方 案 、 
react 的 组 件 方案 等 。 





本 书 适合 前 问 设 计 人 员 、JavaScript 开 发 者 、 移 
动 UI 设 计 者 、 程 序 员 和 项 目 经 理 阅 读 ， 也 可 作为 相 
关 专 业 学 习 用 书 和 培训 学 校 教材 。 
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距 本 书 前 一 版 出 版 已 经 3 年 了 ， 这 3 年 来 前 端 技 
术 也 发 生 了 很 大 变化 。 因 为 这 3 年 中 ， 出 现 了 团 
购 、P2P、O2O0、 下 播 等 几 大 创业 热 滴 ， 对 前 端的 
技术 需求 更 强 ， 也 要 求 更 蜗 。 许 多 公司 为 了 迎合 用 
户 需 求 ， 也 由 PC 冰 转 移 到 移动 痛 ， 全 新 的 区 互 方 
式 ， 及 之 前 不 曾 遇 到 的 性 能 问题 ， 这 些 都 需要 全 新 
的 思路 与 框架 来 解决 。 旧 的 jQuery 已 经 跟 不 上 时 代 
的 步伐 ， 因 此 一 些 新 库 如 十 后 春 旁 般 出 来 ， 如 
fastclick、 iscroll、react、fetch-polyfill、es5-shim.、 
babel, rollup. rxjs ...... 在 react 狐 版 刚 完 成 之 际 ， 
react HRA eer nodejs 己 经 发 展 到 
8.0， 这 么 多 新 东西 ， 这 么 快 的 更 新 换代 ， 一 方面 反 
BRS By py 另 一 方面 说 明 这 个 市 场 
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A RFEA ICA AND, BOULEBIA SSSA, FA 
适时 推出 seajs， 与 国外 的 requirejs 苑 争 ， 国 内 与 论 
哗然 ， 贬 春 不 一 ， 但 不 管 你 说 什么 ， 时 势 造 英 雄 ， 
为 什么 英雄 不 是 自己 呢 。 说 到 底 ， 实 力 很 重要 。 








在 前 端 最 能 反映 威力 的 技术 就 是 框架 ， 其 中 一 
个 评价 标准 是 在 GitHub 上 拿 到 很 多 星星 的 开源 框 染 
(网 友 的 评论 ) 。 这 是 一 本 讲 JavaScript 框 架 的 书 ， 
初版 肥 布 时 ， 是 国内 唯一 一 本 深入 研究 前 新 框架 的 
书 。 新 的 一 版 ， 也 是 市 面 上 唯一 能 把 框架 研究 得 较 
深入 的 书 。 深 入 并 不 代表 难 ， 但 肯定 有 门槛 。 因 为 
从 2015 年 起 ，JavaScript 就 加 速 添加 新 特征 、 新 语 
VE. Pre, HEAR CLARE EK, RRRA 
条， 因为 对 应 的 行业 需求 总 是 比 我 们 的 框架 更 复 
杂 。 是 我 们 的 框架 适应 现实 ， 不 是 我 们 的 框架 无 端 
变 得 如 此 “不 可 理喻 ”， 学 习 门 析 越 来 越 蜗 ， 要 读 惜 
己 有 框架 的 难度 系数 越 来 越 陡 峭 。 





“PR, MENUR ALIAE, ZED) it 
H, FCN AEE a AN EZ Be, EEP a A 
容 窒 无几 。 我 党 得 有 效 的 方法 是 多 看 几 本 进 阶 的 
P. AAW, PATRE- ACEN, REHAT 
丙 椎 。 因 此 我 推荐 钱穆 的 另 一 个 说 法 。 当 年 ， 李 歼 
器 他 请 教 治学 方法 ， 他 回答 说 : 并 没有 具体 方法 ， 

要 多 读书 、 多 求解 ， 当 以 古书 原文 为 底子 、 为 
Soa Ae arn ee 书 要 看 第 一 流 的 ， 
Wi, SRPABE i, AU-ABET 
SBA KEBAB, FR BEA ABSA BAY A 
mae PEPADIS 。 从 这 里 面 得 到 许多 局 
一 是 读 好 书 ， 二 是 读 原 版 ， 三 是 精读 ， 四 是 能 
De tie 
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第 1 点 谈 好 书 。 在 知 乎 ， 总 是 有 新 人 请 教学 习 
前 闪 访 看 什么 书 的 问题 。 其 实 前 端的 好 书 也 有 不 
>, WARP, WRB EEE BARB Meh 
Paoa Pias 《你 不 知道 的 JavaScript》， 也 很 有 








特色 。 


第 2 扩 读 原版 ， 在 代行 业 ， 特 指 英 文 原版 。 大 
几 有 新 拉 术 出 来 ， 它 们 几乎 部 是 以 英文 为 载体 出 
现 ， 然 后 阳 一 年 半 载 ， 才 翻译 到 国内 ， 所 以 学 习 狐 
拉 术 还 是 先 看 原版 书 。 














第 3 点 精 谈 ， 就 是 重复 看 。 SN 
但 如 条 发 现 书 上 说 的 东西 你 始终 看 不 进去 时 ， 
不 要 坚持 ， 一 般 来 说 看 不 下 去 是 因为 : 一 a 
有 达到 看 本 书 的 水 平 ， 不 适合 你 看 ; 二、 你 看 的 书 
的 确 是 本 “ 烂 书 ”， 过 到 这 种 情况 赶紧 换 书 。 如 有 果 找 
到 一 本 适合 目 己 的 书 一 定 要 坚持 看 下 去 ， 看 到 不 恒 
的 东西 多 搜索 ， 搜 索 不 到 束 多 问 人 人。 当初 ， 我 阅读 
jQuery 源码 也 是 如 此 ， 最 初 看 的 是 1.4.3 版 本 ， 看 得 
一 头 雾 水 ， 一 气 之 下 ， 从 最 初 的 1.0 厂 本 开始 看 。 看 
EMARE, TRIARII E, HA JERA 
来 为 什么 重 构 成 这 样 。 在 那 本 书 中 ， 有 相当 多 的 源 


























码 ， 里 面 着 着 实 实 比较 了 程序 的 演化 过 程 。 





(JavaScript , A 
高 级 程序 设计 》 《JavaScript 权 威 指南 》 《DOM 启 蒙 》 
《JavaScript DOM 
seed Seach 编程 艺术 》 《CSS 权 威 指南 》 


《编写 可 维护 的 . RES 《 单 页 Web 应 用 : Java 《精通 CSS: 高 级 Web 
JavaScript) 《JavaScript 框 染 设计 Script 从 前 端 到 后 端 》 标准 解决 方案 》 


《基于 MVC 的 
JavaScript Web 
富 应 用 开发 》 


第 4 点 看 厚 书 ， 一 些 集大成 者 的 书 ， 比 如 你 创 
作文 学 ， 束 看 看 《 文 心 雕 龙 》;， WRAZ, MIA 
黑 格 尔 的 《哲学 全 书 》。 在 JavaScript 领 域 ， 所 请 的 
大 部 头 葛 过 于 《JavaScript 权 威 指南 》 等 。 厚 达 干 
页 ， 许 多 细 市 都 涉及 了 。 











看 了 这 样 的 书 ， 也 不 能 你 证 你 能 写 出 漆 完 的 代 
码 ， 更 别 说 创造 一 个 热门 的 框 染 。 这 情形 残 好像 你 
学 了 些 单词 和 语法 ， 你 就 想 听 展 不 市 字 医 的 瑞 文 电 
影 一 样 ， 那 是 不 可 能 的 。 不 同 阶段 ， 你 需要 党 握 的 
技能 是 不 一 样 的 。 框 染 是 为 一 个 层次 的 拉 术 。 但 列 














灰心 ， 本 书 就 是 这 些 知 识 应 用 的 指南 ， 从 高 人 的 博 
客 中 、 浏 览 右 的 更 新 日 志 中 、GitHub 的 ISSUE 中 ， 
半 对 兰若 整理 来 的 知识 ， 加 上 上 自己 的 实践 分 享 给 大 
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一 版 的 《JavaScript 框 架设 计 》 是 完全 按照 一 
个 框架 的 编写 顺序 来 编排 ， 导 致 岗 读 难 上 度 太 大 ， 让 
许多 读者 反馈 说 无 法 坚持 下 去 。 这 次 大 改版 ， 将 一 
些 难 点 挪 到 后 面 ， 并 加 上 大 量 的 流程 图 与 示意 图 来 
降低 学 习 难 上 度 。 并 且 随 着 浏览 器 的 升级 ， 许 多 东西 
也 该 更 狐 换 代 ， 因 此 本 书 促 然 是 一 本 新 书 ， 无 论 是 
目录 结构 与 内 容 上 都 焕然 一 新 。 最 开始 的 知识 是 偏 
RE, WZ- ELHET, E h MEPER 
的 模块 ， 里 面 会 大 量 列举 实现 相同 功能 的 不 同 实 
现 ， 比 如 说 isArray、trim、 一 个 迷你 的 事件 系统 、 
获取 元 素 样 式 、 如 何 器 域 .…... 但 越 到 后 面 ， 代 码 就 
越 少 ， 却 能 通过 提供 的 网 上 链接 ， 到 相关 博客 里 去 
观看 相关 的 内 容 。 后 面 几 章 都 是 非常 前 治 的 东西 ， 





























许多 技术 方案 还 没有 定案 (至 少 在 我 成 书 时 ) ， 没 
有 最 佳 实践 ， 只 能 提供 一 些 抽象 的 方法 论 ， 让 读者 
们 自行 悟道 。 有 些 东 西 不 是 死记 便 背 束 能 理解 的 。 
并 且 ， 本 书 也 不 是 让 你 造 一 个 avalon/angular 的 框 

染 。 每 个 时 代 对 框架 的 需求 都 不 一 样 。 引 用 《从 0 
到 1》 里 的 话 一 一 商业 世界 的 每 一 刻 都 不 会 重演 。 

下 一 个 比尔 : 盖 次 不 会 再 开发 操作 系统 ， 下 一 个 拉 
里 : 佩 奇 或 是 谢 尔 蓄 : 布 林 不 会 再 研发 搜索 引擎 ， 下 
一 个 马克 - 扎 克 伯 格 也 不 会 去 创建 社交 网 络 。 如 果 
你 照搬 这 些 人 的 做 法 ， 你 就 不 是 同 他 们 学 习 了 。 

















最 后 ， 感 谢 那 些 帮 我 审 稿 的 朋友 们 《以 下 排名 
INDICA): 





EV Mi, PRE. RSNA. XAT. BERR. TT 
IE. RP BRD. JAR ARKH. Baek. > 
E EFU MEN 


LA Ze is PERERA ATA R AAIR HE 


旺 仙 贝 、 大 和 白 免 奶 糖 、 肉 松 饼 、 徐 福 记 、 和 牛 轧 糖 、 
牛肉 粒 、 钞 鱼 丝 、 小 黄鱼 、 曲 奇 饼 、 德 英 巧 克 
Ta 它们 也 不 分 先后 ! 





本 书 答疑 QQ 群 为 (471118627) ， 本 书 编 辑 和 
投稿 邮箱 为 zhangtao@Dptpress.com.cn。 


InfoQ 访 谈 


InfoQ: 请 您 介绍 一 下 自己 目前 的 工作 职 贡 ， 
负责 的 项 目 情况 。 据 说 您 是 写 小 说 出 映 的 ， 能 天 
简单 介绍 一 下 目 己 的 工作 经 历 ? 为 什么 选择 进入 
前 器 领域 ? 为 什么 对 前 端 框 染 抱 有 极 大 的 热情 ? 








笔者 : 现在 我 在 “去 哪儿 网 ” 任 前 端 架构 师 一 
职 ， 市 领 大 家 捅 react 开 及。react， 特 别 是 react 
native 是 现时 最 好 的 移动 框架 。 而 公司 的 重点 也 转 
移 到 移动 端 了 ， 因 此 我 们 小 组 负责 将 移动 端 相关 设 
置 全 部 搭建 起 来 ， 各 种 “ 坑 ” 躁 一 裔 ， 努 力 为 业务 线 
提供 最 坚实 的 支撑 。 








每 个 人 的 经 历 者 很 曲 打 ， 尤 其 是 前 站 人 员 ， 许 
多 人 都 贫 得 前 站 比较 容易 学 ， 或 者 赚钱 比较 多 ， 才 
进入 这 行业 。 而 我 比较 钼 运 ， 编 代 人 码 也 是 我 大 学 时 


的 一 个 乐趣 。 因 此 不 会 像 其 他 人 ， 会 出 现 动力 不 足 
的 情况 。 当 然 我 的 兴趣 还 是 很 多 的 ， 比 如 写 小 说 、 
建筑 、 考 古 、 学 日 语 、 学 动画 、 看 科 弥 小 说 、 陶 

艺 .……. 会 找 乐子 的 人 ， 不 会 轻易 泄气 。 


总 的 来 说 ， 我 的 兴趣 都 有 个 特 扣 ， 束 是 缺少 与 
他 人 的 互动 。 编 代码 也 一 样 ， 一 个 人 前 静 地 编 融 好 
了 。 像 PM， 需 要 与 别人 不 断 沟通 ， 我 可 能 做 不 过 
来 。 每 个 人 的 性 格 都 不 一 样 ， 因 此 选择 行业 要 符合 
目 己 的 性 格 。 


全 于 为 什么 进入 前 靖 ， 纯 粹 是 偶然 。 我 的 一 个 
第 第 是 做 这 行 的 。 我 在 小 县 城 采 看 赚 不 了 几 个 钱 ， 
他 说 市 我 去 深圳 见识 见识 ， 便 一 下 子 介绍 到 他 公司 
做 前 中 了 。 我 在 小 县 城 时 也 用 前 闯 接 些小 活 过 日 
子 ， 因 此 不 会 觉得 一 下 了 跳跃 太 大 。 更 重要 的 是 ， 
我 特别 能 写 程 序 ， 我 没 进 入 这 行 时 ， 就 写 了 三 白 多 
篇 有 天 前 端的 博文 ， 那 时 大 家 都 以 为 我 在 大 公司 任 


























职 了 。 


出 于 这 样 的 误解 ， 公 司 一 开始 就 把 一 些 很 重要 
的 事 让 我 做 ， 我 要 确保 代码 的 质量 ， 因 为 我 的 组 件 
征 补 许多 人 复 用 的 ， 融 从 那 时 起 ， 我 融 一 二 搞 杠 
架 、 搞 组 件 、 搞 各 种 工具 。 





infoQ: WIAA FA vm AEE AY AEA 
E. AM Sim AE AS AY ECD A ee fey? SAE BY ita HE 
BRA, FOUR INR AZT A? EA EY iin ER 
义 是 怎样 起 步 的 、 发 展现 状 如 何 ? 





笔者 : 这 是 一 个 老生 第 谈 的 话题 ， 基 本 每 本 
JavaScript 书 都 会 聊 一 下 这 个 话题 。 主 要 原因 是 ， 
JavaScript 没 有 目 己 的 SDK (核心 库 ) ， 需 要 依 
赖 “ 民 间 ” 的 力量 。 最 开始 是 一 些 大 公司 有 能 力 开发 
这 些 框架 ， 如 Prototype.js， 也 是 作为 ROR 的 次 要 项 
目 开 发 出 来 的 。 此 外 还 有 dojo、closure、YUI 这 已 
大 的 框架 ， 也 是 大 公司 搞 的 。 后 来 突然 出 现 jQuery 





这 样 由 天 才 开 发 的 框架 。 事 实证 明 ， 大 公司 那 一 套 
管理 方式 ， 以 KPI 驱动 的 框架 有 着 致命 的 缺憾 ， 虽 
然 面面俱到 ， 但 不 能 迅速 吸收 IT 社区 的 新 东西 ， 使 
用 起 来 不 够 方便 灵活 。 








再 后 来 ， 大 家 都 知道 是 jQuery 的 天 下 ， 大 家 都 
争先 东 ， 后 地 为 它 做 插件 。jQuery 也 大 大 解放 了 程序 
员 的 生产 力 ， 让 我 们 有 时 间 做 一 些 更 有 意义 的 事 。 
在 后 jQuery 时 代 ， 最 有 意义 的 两 件 事 是 RequireJS 的 
诞生 与 nodejs 的 出 世 。 前 者 试图 解决 JavaScript 模 块 
化 问题 ， 后 者 让 我 们 能 从 后 端 那 里 “ 抢 ” 走 一 些 活 
儿 ， 那 些 活 儿 本 来 怠 是 前 端 做 比较 合适 。 pene 
模板 、 套 模板 、 传 数据 、JavaScript 的 语法 检测 、 
格 检测 、 理 点 等 。 




















这 个 时 间 里 ， 产 生 了 像 backbone 这 样 的 MVC 框 
架 。 但 立即 被 knockout、angular、react 等 MVVM 框 
架 占 去 份额 了 。 要 知道 ， 后 端 从 MVC 进 化 到 


MVVM， 需 要 大 概 10 年 时 间 ， 而 前 端 则 不 到 ?年 。 
前 端 框架 发 展 实 在 太 迅 独 了 ! 


我 想 其 背后 最 大 的 动力 是 需求 ! 源源 不 断 的 需 
求 ! 原来 由 后 站 做 的 活 儿 ， 放 在 前 端 做 更 合适 、 更 
快 ， 用 户 体 验 更 好 。 这 有 是 趋 势 使 然 ， 挡 也 挡 不 住 。 








目前 国内 的 发 展 历程 其 实 与 国外 一 模 一 样 。 最 
开始 是 公司 罕 涉 ， 后 来 就 涌现 大 量 出 色 的 个 人 项 
目 。 阿 里 的 前 问 技 术 之 所 以 这 么 强 ， 是 因为 他 们 不 
产地 研制 自己 的 “轮子 ”,， “轮子 ”会 越 造 越 好 。 那 些 
绝 不 重复 造 “ 轮 子 ” 的 人 默默 无 名 ， 而 框架 作者 们 则 
开创 目 己 一 片 新 天 地 了 。 中 国 拥 有 世界 上 最 庞大 的 
互联 网 市 场 ， 面 临 的 挑战 很 大 ， 光 是 满足 国内 用 户 
的 需求 ， 国 内 框架 的 研发 人 员 束 需要 比 国 外 同行 更 
加 努力 。 经 过 这 几 年 的 磨 练 ， 国 内 的 框架 也 淘 渐 走 
出 国门 “如 我 的 avalon， 在 澳大利亚 、 德 国都 有 人 
在 用 ， 又 如 百度 的 ECharts， 这 个 也 非常 抢眼 ) 。 


























infoQ: avalon 的 起 源 与 发 展 是 如 何 的 ? 
avalon 2 的 架构 如 何 ? 采用 这 样 的 架构 有 什么 好 
处 ? 与 其 他 框架 相 比 ，avalon 更 加 “接地 气 ” 的 点 体 
现在 哪些 地 方 ? 


笔者 : avalon 当 初 只 是 我 男 一 个 早期 的 框 染 
mass Framework 的 一 个 插件 。mass Framework 类 似 
于 jQuery 与 Prototypejs 的 结合 体 。 没 什么 特色 ， 被 
埋没 也 是 必然 的 。 但 我 说 过 , “轮子 ”会 越 造 越 好 
的 。 当 我 将 这 个 插件 介绍 到 博客 园 一 一 国内 一 个 
AB A ITAL LX, BARRA. FEA HOR 
搞 。 经 过 5 年 的 发 展 ， 它 渐渐 拥有 自己 的 论坛 与 社 
区 。 不 过 ， 由 于 年 龄 的 增长 ， 我 也 开始 抗拒 一 些 新 
东西 〈 比 如 说 社区 上 一 些 目 动 化 工具 ， 总 是 想 目 己 
全 部 实现 ) ， 导 致 avalon 一 度 发 展 缓慢 。 发 展 到 1.5 
版 时 试图 奋起 直 退 ， 效 果 不 明 显 。avalon?2 决 定 使 用 
一 个 更 吸引 眼球 的 东西 扭转 局 面 一 一 这 就 是 虚拟 
DOM, X S VERE EAI KR. MVVM ERPS JI 




















便 ， 但 很 容易 出 现 性 能 瓶颈 。 出 目 于 谷歌 之 手 的 
angular， 也 有 2000 个 指令 〔 即 一 个 页 面 超过 2000 个 

HO, DU orate A iB) -o Facebooki 
react 市 来 了 “虚拟 DOM” 这 个 新 概念 ， 使 用 轻 量 对 象 
代 奉 重型 对 象 来 承担 绝 大 多 数 的 页 面 重 绘 工作 ， 解 
RS ATTA AY “PE Be iar” [ea] pel 











原来 MVYVM 架 构 分 3 层 ，M、V、VM 三 层 , 我 
们 只 需要 关注 VM。VM 通 过 各 种 手段 得 知 外 界 对 它 
的 操作 ， 然 后 它 智能 地 通知 M 与 V 进 行 变更 。VM 承 
受 太 多 职责 ， 导 致 不 堪 重 负 。 而 虚拟 DOM 的 导 
入 ， 让 avalon2 拥 有 4 层 染 构 。 虚 拟 DOM 位 于 V 与 
VM 之 则 ， 复 杂 的 视图 计算 由 虚拟 DOM 计 算 好 ， 然 
后 diff 出 差异 点 实现 最 小 化 刷新 。 这 是 算法 的 伟大 
胜利 。 为 了 实现 虚拟 DOM， 前 端 框架 作者 也 接触 
编译 原理 等 高 深 的 东西 了 。 














现在 主流 的 MVVM 也 结合 虚拟 DOM 进 行 性 能 


优化 。 基 本 上 它们 是 基于 Object.defineProperty 这 个 
API。 而 这 个 API 在 IE8 中 有 bug， 只 能 用 于 IE9 十 。 
因此 它们 的 兼容 性 都 比较 差 。 而 avalon 的 优势 在 于 
其 作者 精通 各 种 莱 容 性 问题 与 “ 春 法 ”。 在 IE6~~IE8 
下 ， 我 找到 了 VBScript 实 现 对 VM 的 自省 机 制 ， 在 
较 新 的 浏览 器 使 用 Object.defineProperty， 在 更 新 锐 
的 浏览 右 ， 则 使 用 Proxy〔 动 态 代 理 ) 这 个 划时代 
的 东西 ， 从 此 我 们 可 以 动态 监听 对 象 是 否 被 添加 删 
除了 某 个 属性 ， 或 调用 了 某 个 方法 ， 而 不 像 
Object.defineProperty 只 能 监听 读 写 操作 (Proxy 对 象 
匀 Q 用 于 定义 目 定 义 基本 操作 的 行为 ， 如 属性 查找 、 
分 配 、 枚 举 、 函 数 调 用 等 ， 在 Firefox 的 定义 中 一 共 
有 14 个 属性 ) 。 














从 上 面 的 描述 来 看 ，avalon 走 在 时 代 的 前 列 ， 
但 它 不 扎 初 心 ， 还 继续 文 持 下 6， 让 大 家 用 MVVM 
或 虚拟 DOM 时 没有 后 顾 之 忧 。 并 且 大 家 也 不 用 担 
Mavalony fF#EAIESG, SASSER ITE. ALA 


avalon 是 一 份 源码 编译 出 好 几 个 版 本 ， 每 个 版 本 根 
据 浏 览 器 的 支持 程度 合并 对 应 的 模板 。 如 果 只 想 运 
行 于 了 下 10， 其 会 相当 小 。 


infoQ: 在 选择 前 并 框架 时 ， 大 家 的 建议 很 
多 ， 例 如 结合 目 己 的 业务 等 。 您 也 曾 所 到 ， 选 择 
HU Sig HEIR VS Ae EER AS SBM TL BRR 











虑 的 点 这 么 多 ， 究 竟 怎 样 来 综合 考虑 呢 ? 具体 的 
步骤 应 该 是 怎样 的 ? 





笔者 : 的 确 如 此 ， 技 术 本 来 是 为 业务 服务 的 ， 
FLA Du" te ANE A ME, TERRA BUTT A). H HV HE 
CAT WIRAS, BENNIKE FW BD 
FAR]. AARETE, kA E 
要 多 了 。 千 万 别 让 手下 人 员 目 行 决定 。 他 们 玩 不 转 
可 以 “ 担 担 屁股 走 人 ”， 留 下 一 个 烂 扒 子 。 我 们 要 考 
谍 a 到 业务 的 可 持续 性 、 代 码 的 可 交接 性 及 团队 的 普 
WESC HEAT. ELEN“ AA), WA HM ITAA KR, 








abe Ja si ACA SUP Br i TG, FFE ZS 
都 是 招 PHP 实 现 前 端 开 发。 他 们 的 设计 模式 比较 
好 ， 可 以 上 手 angular。 如 果 一 个 团队 新 人 人 够 多 ， 不 
稳定 ， 则 只 能 用 jQuery 与 bootstrap 。 如 果 是 一 个 创 
业 公 司 ， 急 大 做 出 原型 来 拉 投 资 ， 可 以 演 试 vue、 
avalon、react 等 短平快 的 框架 。 但 我 所 说 的 还 是 核 
心 框架 ， 涉 及 图 表 、UI 库 ， 这 些 需 要 架构 师 见 多 识 
三 ， 目 己 “ 赵 过 坑 ”， 才 让 团队 “集中 过 河 ”。 











infoQ: 有 人 说 前 闹 编 程 标准 和 方法 渐渐 出 现 
稳定 的 趋势 ， 您 怎么 看 竺 这 一 观点 ? 在 之 后 的 发 
展 过 程 中 ， 有 没有 可 能 标准 完全 统一 ? 有 没有 可 
能 茶 个 前 端 框 染 “一 统 江湖 ”? 











笔者 : 这 个 观点 前 半 段 是 对 的 。 像 jQuery 市 来 
一 系列 便捷 的 操作 DOM 的 方式 ，append、 
prepend、remove 等 方法 已 经 在 DOM4 中 实现 了 。 其 
最 著名 的 选择 需 引 擎 ， 也 有 了 原生 蔡 代 品 。 因 为 浏 


as fel ZA ARTE SEAR, HE -HE AUR 
内 置 可 以 讨好 用 户 。 但 浏览 器 厂商 之 间 没 怎么 沟 
通 ，W3C 给 出 的 规范 也 模糊 ， 出 现 差 异 是 在 所 难免 
的 。 因 此 不 要 相信 浏览 器 ， 要 使 用 框 避 ! 至 于 框 
BR, HEAR ZEAE RIN, EEA ATE 
现 ， 它 们 可 能 以 某 个 神奇 的 设计 一 下 推翻 前 面 的 技 
术 。 就 像 jQuery“ 灭 掉 ?prototype，gulp“ 灭 掉 ”grunt， 
webpack“:X #&”browserfy, react“K 4” angular ...... 





FF CA MERE it ITA mK, BEDS UAB 
有 领头 于。 因此 想 一 个 框架“ 一 统 江湖 ”， 这 个 不 可 
能 也 不 实际 。 只 要 做 好 目 己 的 擅长 之 处 ， 开 友 束 会 
比较 顺利 。 





infoQ: 您 认为 ， 前 端 开发 人 员 学 习 框架 设计 
应 具备 哪些 能 力 ? 应 从 哪些 方面 着 手 进行 设计 ? 
哪些 地 方 有 “ 坑 >， 需 要 注意 避 开 ? 


笔者 :这 个 问题 比较 笼统 ， 我 也 只 能 笼统 地 回 


答 。 束 像 你 问 怎 么 挣 大 钱 ， 有 许多 东西 ， 人 家 说 出 
来 你 也 不 能 复制 。 首 先 ， 基 础 很 重要 ， 如 计算 机 科 
PERNA, din HU im UI RA AEF. FUR REIT 
式 ， 这 是 Java 十 多 年 积累 的 精华 ， 是 我 们 构建 巨型 
工程 的 利器 。 现 在 前 端 框 染 的 程序 很 多 是 上 万 行 

了 。 像 过 去 那样 ， 全 是 方法 十 全 局 变量 在 堆砌 ， 在 
生产 环境 中 找 bug 是 恶 梦 。 最 后 是 好 好 看 高 手 们 的 
框 染 ， 阅 读 源 码 是 进步 最 快 的 方式 之 一 。 只 有 看 了 
ew SUIS, PRAT AERA. Finda, ME E 
传 与 测试 了 ， 宣 传 确 保 你 拥有 第 一 批 用 户 ， 成 为 你 
继续 维护 与 升级 的 动力 。 需 要 提供 一 系列 便捷 的 下 
载 渠 道 ， 因 为 酒 香 也 介 埠 子 深 。 测 试 是 确保 你 能 留 
住 用 户 。 目 前 社区 上 有 大 量 的 测试 工具 ， 你 可 以 将 
它们 全 部 绑 定 在 webpack， 在 用 户 build 工 程 时 ， 把 
所 有 测试 运行 一 过 。 











最 后 说 < 坑 >”， 其 实 没什么 “ 坑 ”， 所 有 浏览 器 兼 
容 性 问题 与 技术 难点 ， 许 多 技术 高 人 都 提供 现成 方 


案 。 但 如 果 你 做 出 框架 ， 不 再 维护 ， 对 使 用 者 来 说 
这 才 是 “大 坑 ”。 就 是 你 不 想 维护 了 ， 束 要 找 一 个 接 
盘 者 来 主持 。 就 像 jQuery、nodejs 等 彰 名 项 目 ， 原 
作者 早早 交 给 他 人 维护 。 





我 分 天 的 分 圣 束 到 这 里 ， 谢 谢 大 家! 


BIE 种子 模块 





1.1 ”模块 化 


最 近 几 年 ，JavaScript 得 到 飞速 发 展 ， 一 些 框 染 
越 来 越 大 ， 已 经 不 像 过 去 那样 全 部 写 进 一 个 JS 文件 
中 。 但 拆 到 多 个 JS 文 件 时 ， 就 要 决定 哪个 是 入 口 文 
件 ， 哪 个 是 次 要 文件 ， 而 这 些 次 要 文件 也 不 可 能 按 
1、2、3、4 的 顺序 组 织 起 来 ， 可 能 1 依赖 于 2、3，3 
依赖 于 4、5， 每 个 文件 的 顶部 都 像 其 他 语言 那样 声 
明 其 依赖 ， 最 后 在 结束 时 说 明 如 何 暴 露出 那些 变量 
或 方法 给 外 部 使 用 。 





束 拭 你 的 框架 只 有 几 干 行 ， 在 开发 时 将 它们 按 
功能 拆 分 为 10 多 个 文件 ， 维 护 起 来 也 非常 方便 。 加 
之 Node.js 的 盛行 ，ES2016 许 多 语法 不 断 被 浏览 器 支 
持 ， 我 们 更 应 该 拥抱 模块 化 。 


本 书 所 介绍 的 所 有 模块 ， 都 以 Node.js 提 倡 的 
CommonJS 方 式 组 织 起 来 。 


时 下 流行 3 种 定义 模块 的 规范 : AMD IH 、 

CommonJS 5 与 ES6 module。 它 们 都 被 webpack 所 
文 择 。 以 AMD 定 义 JS 模块 通过 RequireJS 能 直接 运 
行 于 浏览 器 ; CommonJS 则 需要 browserfy 等 Node.js 
打包 后 才能 运行 于 浏览 右 ; ES6 module 在 我 写 书 
时 ， 还 没有 浏览 器 文 持 ， 需 要 webpack、rollup 等 
Node.js 工 具 打 包 才 能 运行 于 浏览 震 











下 面 简略 演示 一 下 这 3 种 模块 的 定义 方式 。 


//AMD 
define(['./aaa', './bbb'], function(a, b){ 
return { 
c: a+b 


}) 


// CommonJS 

var a = require('./aaa' ) 
var b = require('./bbb' ) 
module.exports = { 


c: a+b 


} 


//es6 module 
import a form ' 
import b form ' 
var C= ar+b 
export {c} 





ARASH RGR AA, JAMS, 
这 里 暂时 略 过 。 


本 人 是 比较 倾向 使 用 CommonJS 的 ， 因 为 其 相 
关 的 打包 工具 非常 成 熟 ， 并 且 以 这 种 方式 编写 的 框 
架 ， 可 以 与 大 量 Node.js 编 写 的 测试 框架 无 颖 配合 使 


用 。 





再 说 回来 ， 刚 才 提 到 的 入 口 文件 。 整 个 程序 残 
是 引入 其 他 子 模块 ， 然 后 导出 代表 命名 空间 的 
JavaScript RIIT J o 


var avalon = require('./seed/index') 


require( 


require(' 


require( 


require(' 
require(' 
require(' 
require(' 


',/filters/index' ) 
./vdom/index' ) 
',/dom/index' ) 
./directives/index' ) 
./strategy/index' ) 
./component/index' ) 
./vmodel/index' ) 


module.exports = avalon 





我 们 编写 一 个 框架 时 ， 可 能 拆 成 上 百 个 JS 文 





件 。 为 了 方便 寻找 ， 这 时 需要 按照 功能 或 层次 放 进 
不 同 的 子 文件 来 。 然 后 每 个 子 文件 都 有 它 的 入 口 文 
件 〈index.js) ， 由 它 来 组 织 其 依赖 。 本 章 的 种 子 模 
块 ， 就 放 到 seed 这 个 文件 夹 下 了 。 





1.2 ”功能 介绍 


种 子 模块 也 叫 核心 模块 ， 是 框架 的 最 和 完 执行 
的 部 分 。 即 便 像 jQuery 那样 的 单 文件 函数 库 ， 它 的 
内 部 也 分 许多 模块 ， 必 然 有 一 些 模块 剖 在 前 面 立 即 
执行 ， 有 一 些 模块 只 有 用 到 才 执行 ， 也 有 一 些 模块 
(补丁 模块 ) 可 有 可 无 ， 存 在 感 比 较 弱 ， 只 在 特 
ENI hae RAIS o 








既然 是 最 和 完 执 行 的 模块 ， 那 么 就 要 求 其 里 面 的 
方法 是 历经 考验 、 干 锤 百 炼 的 ， 并 且 能 将 这 个 模块 
变 得 极 具 扩展 性 、 高 可 用 、 稳 定性 。 





C1) 扩展 性 ， 是 指 方便 将 其 他 模块 的 方法 或 
属性 加 入 进来 ， 让 种 子 迅 速成 长 为 “一 柠 大 树 ”。 

(2) 高 可 用 ， 是 指 这 里 的 方法 是 极其 常用 
的 ， 其 他 模块 不 用 重复 定义 它们 。 





(3) 稳定 性 ， 是 指 不 能 轻易 在 以 后 版 本 中 删 
BR, BEAST ARE 


参照 许多 框架 与 库 的 实现 ， 笔 者 认为 种 子 模块 
应 该 包含 如 下 功能 : 对 象 扩 展 、 数 组 化 、 类 型 判 
定 、 无 冲突 处 理 、domReady。 本 章 讲 解 的 内 容 以 
avalon 种 子 模块 为 范 本 ， 可 以 在 下 面 的 地 址 中 阅 


WA 
Jk o 


https://github.com/RubyLouvre/avalon/tree/master/src/seed 


13 ”对象 扩展 


我 们 需要 一 种 机 制 ， 将 新 功能 谎 加 到 我 们 的 命 
名 空间 上 。 命 名 空间 ， 是 指 我 们 这 个 框 染 在 全 局 作 
用 域 暴 露 的 唯一 变量 ， 它 多 是 一 个 对 象 或 一 个 函 
数 。 命 名 空间 通 第 也 就 是 框架 名 字 。 我 们 可 以 看 一 
下 别人 是 如 何 为 框架 起 名 字 的 。 


https://www.zhihu.com/question/46804815 


回 到 主题 ， 对 象 扩 展 这 种 机 制 ， 我 们 一 般 做 成 
一 个 方法 ， 叫 做 extend 或 mixin。JavaScript 对 象 在 属 
Petia |S! (Property Descriptor) 没有 诞生 之 
亲 ， 是 可 以 随意 添加 、 更 改 、 删 除 其 成 员 的 ， 因 此 
扩展 一 个 对 象 非常 便捷 。 一 个 简单 的 扩展 方法 实现 
如 下 。 














//Prototype.js 
function extend(destination, source) { 
for (var property in source) 


destination[property] = source[property]; 
return destination; 





不 过 ， 旧 版 本 正在 这 里 有 个 问题 ， 它 认为 像 





Object 的 原型 方法 就 是 不 应 该 被 遇 历 出 来 ， 因 此 for 
in 循环 是 无 法 遍历 名 为 valueOf、toString 的 属性 名 。 
这 导致 ， 后 来 人 们 模拟 Object.keys 方 法 实现 时 也 遇 
到 了 这 个 问题 。 


Object. Keya T = Object.keys || function(obj){ 
var a= []; 
for(a[a.length] in obj); 
return a ; 


} 





在 不 同 的 框架 中 ， 这 个 方法 还 有 不 同 的 实现 ， 
如 EXT 分 为 apply 与 applyIf 两 个 方法 ， 前 者 会 履 盖 目 
标 对 象 的 同名 属性 ， 而 后 者 不 会 。dojo 人 允许 多 个 对 
象 合并 在 一 起 。jQuery 还 文 持 深 拷贝 。 下 面 是 
avalon.mix 方 法 ， 几 乎 是 照 拔 jQuery.extend 方 法 ， 只 
是 在 VBscript 上 做 了 一 些 防 逢 处 理 。 





avalon.mix = avalon.fn.mix = function () { 
var options, name, src, copy, copyIsArray, clone, 
target = arguments[0O] || {}, 
i=1, 
length = arguments.length, 
deep = false 





// 如 果 第 一 个 参数 为 布尔 , FREE BARES N 
if (typeof target === 'boolean') { 
deep = target 
target = arguments[1] || {} 
i++ 


} 


// 确 保 接 受 方 为 一 个 复杂 的 数据 类 型 
if (typeof target !== 'object' && !avalon.isFunction(target 


DE 


} 


// 如 果 只 有 一 个 参数 ， 那 么 新 成 员 添 加 于 mix 所 在 的 对 象 上 
if (i === length) { 

target = this 

i-- 














target = {} 





} 


for (; i < length; i++) { 
// 只 处 理 非 空 参数 
if ((options = arguments[i]) != null) { 
for (name in options) { 
try { 
src = target[name] 
copy = options[name] // 当 options 为 VBS 对 象 时 报 




















} catch (e) { 
continue 
} 


// 防止 环 引用 

if (target === copy) { 
continue 

} 


if (deep && copy && (avalon.isPlainObject(copy) 
|| (copyIsArray = Array. 
isArray(copy)))) { 


if (copyIsArray) { 
copyIsArray = false 
clone = src && Array.isArray(src) ? src 


} else { 
clone = src && avalon.isPlainObject(src 


src : {} 
} 


target[name] = avalon.mix(deep, clone, copy 


} else if (copy !== void 0) { 
target[name] = copy 
} 


} 
} 
} 


return target 








代码 里 面 用 到 了 avalon.isFunction， 


avalon.isPlainObject， 它 们 也 属于 种 子 模块 的 一 部 
分 ， 下 面 有 解说 。 


由 于 此 功能 这 么 常用 ， 到 后 来 ES6 束 干脆 支持 
它 了 ， 于 是 有 了 Object.assgin 。 如 果 要 低 端 浏览 器 
直接 用 它 ， 可 以 使 用 以 下 polyfill 4! 。 








function ToObject(val) { 


if (val == null) { 
throw new TypeError('Object.assign cannot be called wit 


h null or undefined'); 


} 
return Object(val); 
} 
module.exports = Object.assign || function (target, source) { 
var from; 
var keys; 


var to = ToObject(target); 


for (var s = 1; s < arguments.length; s++) { 
from = arguments[s]; 
keys = Object.keys(Object(from) ); 


for (var i = 0; i < keys.length; i++) { 
to[keys[i]] = from[keys[i]]; 


} 


return to; 





14 数组 化 


浏览 器 下 存在 许多 类 数组 对 象 ， 如 function 内 的 
arguments, iitdocument.forms. form.elements, 
doucment.links. select.options, 
document.getElementsByName, 
document.getElementsBy TagName、 childNodes, 
children 等 方式 获取 的 节点 集合 CHIMLCollection、 
NodeList) ， 或 依照 菏 些 特殊 写法 的 目 定义 对 象 。 








var arrayLike = { 


length: 3 


} 








类 数组 对 象 是 一 个 很 好 的 存储 结构 ， 不 过 功能 
太 毗 了 ， 为 了 侍 受 纯 数 组 的 那些 便捷 方法 ， 我 们 在 
处 理 它们 前 都 会 做 一 下 转换 。 


通常 来 说 ， 使 用 Array.prototype.slice.call 就 能 转 
换 我 们 的 类 数组 对 象 了 ， 但 旧版 本 IE 下 的 
HTMLCollection、NodeList 不 是 Object 的 子 类 ， 采 
用 如 上 方法 将 导致 正 执行 异 冲 。 我 们 看 一 下 各 大 库 
怎么 处 理 的 。 


//jQuery 的 makeArray 
var makeArray = function(array) { 
var ret = []; 
if (array != null) { 
var 1 = array.length; 
// The window, strings (and functions) also have 'lengt 


h 1 
string" || jQuery.is 
Function(array) | | 
array.setInterval) 
ret[0] = array; 
else 
while (i) 
ret[--i] = array[i]; 


return ret; 


} 











jQuery 对 铺 是 用 来 储存 与 处 理 dom 元 系 的 ， 它 
主要 依赖 于 setArray 方法 来 设置 和 维护 长 度 与 索 
引 ， 而 setArray 的 参数 要 求 是 一 个 数组 ， 因 此 
makeArray 的 地 位 非常 重要 。 这 方法 保证 就 算 没 有 





参数 也 要 返回 一 个 空 数组 。 


Prototype.js 的 $A 方法 如 下 : 


function $A(iterable) { 
if (!iterable) 
return []; 
if (iterable.toArray) 
return iterable.toArray(); 


var length = iterable.length || 0, results = new Array(leng 
th); 


while (length--) 
results[length] = iterable[length]; 
return results; 


}; 





mootools 的 $A 方法 如 下 : 


function $A(iterable) { 
if (iterable.item) { 
var 1 = iterable.length, array = new Array(1); 
while (1--) 
array[1l] = iterable[1]; 
return array; 
} 


return Array.prototype.slice.call(iterable); 


}; 





Ext 的 toArray 方 法 如 下 : 


var toArray = function() { 
return isIE ? 
function(a, i, j, res) { 
res = []; 
Ext.each(a, function(v) { 
res.push(v); 
}); 


return res.slice(i || ©, j || res.length); 


function(a, i, j) { 
return Array.prototype.slice.call(a, i || ©, j 


|| a.length); 


}() 





Ext 的 设计 比较 巧妙 ， 功 能 也 比较 强大 。 它 一 
开始 就 目 动 执行 目 旱 ， 以 后 束 不 用 判定 浏览 器 了 了。 
它 还 有 两 个 可 选 参数 ， 对 生成 的 纯 数 组 进行 操作 。 











但 纵 观 这 些 方法 ， 其 实 有 一 个 特点 ， 束 是 优化 
考虑 使 用 Array.prototype.slice 来 转换 类 数组 对 象 。 
而 Array.prototype.slice 倍 到 的 唯一 障碍 就 是 旧 夏 本 
IE 下 的 节点 集合 。 那 么 ， 我 们 设法 让 IE 下 的 
Array.prototype.slice 能 切割 节点 集合 瓯 一帆风顺 
了 。 以 下 是 avalon 的 解决 方案 ， 不 过 大 部 分 代码 是 
来 自 firefox 官 方 的 。 











//https://developer .mozilla.org/zh-CN/docs/Web/JavaScript/Refer 
ence/Global_Objects/Array/slice 

JER 

* Shim for "fixing" IE's lack of support (IE < 9) for applying 
slice 


* on host objects like NamedNodeMap, NodeList, and HTMLCollecti 
on 

* (technically, since host objects have been implementation-dep 
endent, 

* at least before ES6, IE hasn't needed to work this way). 

* Also works on strings, fixes IE < 9 to allow an explicit unde 
fined 

* for the 2nd argument (as in Firefox), and prevents errors whe 
n 

* called on other DOM objects. 

*7 


var _Slice = Array.prototype.slice 
try { 
// Can't be used with DOM elements in IE < 9 
_Slice.call(document .documentElement ) 
} catch (e) { // Fails in IE < 9 
// This will work for genuine arrays, array-like objects, 
// NamedNodeMap (attributes, entities, notations), 
// NodeList (e.g., getElementsByTagName), HTMLCollection (e 
.g., ChildNodes), 
// and will not fail on other DOM objects (as do DOM elemen 
ts in IE < 9) 
Array.prototype.slice = function (begin, end) { 
// IE < 9 gets unhappy with an undefined end argument 
end = (typeof end !== 'undefined') ? end : this.length 


// For native Array objects, we use the native slice fu 
nction 
if (Array.isArray(this) ) { 
return _slice.call(this, begin, end) 


i 


// For array like object we handle it ourselves. 
var i, cloned = [], 
size, len = this.length 


// Handle negative value for "begin" 
var start = begin || 0 
start = (start >= 0) ? start : len + start 


} 


// Handle negative value for "end" 
var upTo = (end) ? end : len 
if (end < 0) { 

upTo = len + end 


} 


// Actual expected size of the slice 
size = upTo - start 


if (size > 0) { 
cloned = new Array(size) 
if (this.charAt) { 
for (i = 0; i < size; i++) { 
cloned[i] = this.charAt(start + 1) 
} 
} else { 
for (i = 0; i < size; i++) { 
Cloned[i] = this[start + i] 


} 
} 


return cloned 


avalon.slice = function (nodes, start, end) { 


return _slice.call(nodes, start, end) 





上 面 的 Array.prototype.slice polyfill J 以 放 到 另 
一 个 补丁 模块 ， 这 样 确 保 我 们 的 框架 在 升级 时 非常 
轻松 地 抛弃 这 些 历史 包 裕 。 


15 ”类 型 的 判定 





JavaScript 存 在 两 套 类 型 系统 : 一 套 是 基本 数据 
类 型 ， 另 一 套 是 对 象 类 型 系统 。 基 本 数据 类 型 在 ES5 
中 包括 6 种 ， 分 别 是 undefined、string、null、 
boolean、function 和 object。 基 本 数据 类 型 是 通过 
typeof 来 检测 的 。 对 象 类 型 系统 是 以 基础 类 型 系统 
为 基础 的 ， 通 过 instanceof 来 检测 。 然 而 ，JavaScript 
A iv IK PA LSE Se, Te HEE J 
isXXX 系列 。 就 拿 typeof 来 说 ， 它 只 能 粗略 识别 出 
string、number、boolean、function、undefined 和 
object 这 6 种 数据 类 型 ， 无 法 识别 Null、RegExp 和 


Argument 等 细 分 对 象 类 型 。 








让 我 们 看 一 下 这 里 面 完 葛 有 多 少 陷阱 。 





typeof null// "object" 

typeof document.childNodes //safari "function" 

typeof document.createElement('embed')//ff3-10 "function" 
typeof document.createElement('object')//ff3-10 "function" 
typeof document.createElement('applet')//ff3-10 "function" 


typeof /\d/i VV 在 实现 了 ecma262v4 的 浏览 器 返回 "function" 
typeof window.alert //IE678 "object"" 

var iframe = document.createElement('iframe'); 

document .body.appendChild(iframe) ; 

xArray = window.frames[window.frames.length - 1].Array; 
var arr = new xArray(1, 2, 3); // [1,2,3] 

arr instanceof Array; // false 

arr.constructor === Array; // false 


window.onload = function() { 
alert(window.constructor);// IE67 undefined 
alert(document.constructor);// IE67 undefined 
alert(document.body.constructor);// IE67 undefined 
alert((new ActivexObject('Microsoft.XMLHTTP' )).constructor ) 
;// IE6789 undefined 


isNaN("aaa") //true 





上 面 分 4 组 ， 第 一 组 是 typeof 的 坑 。 第 二 组 是 
instanceof 的 陷 只 要 原型 上 存在 此 对 象 的 构造 器 





它 束 返回 true， 但 如 果 跨 文档 比较 ，iframe 里 面 的 数 
组 实例 就 不 是 父 窗口 的 Array 的 实例 。 第 三 组 是 有 
关 constructor 的 陷阱 ， 在 旧版 本 IE 下 ，DOM 与 BOM 
对 象 的 constructor 属 性 是 没有 姑 露 出 来 的 。 最 后 有 
天 NaN，NaN 对 象 与 null、undefined 一 样 ， 在 序列 
化 时 是 原样 输出 的 ， 但 isNaN 这 方法 非常 不 靠 谱 ， 
把 字符 串 、 对 象 放 进去 也 返回 true， 这 对 我 们 序列 











化 非常 不 利 。 


另外， 在 IE 下 typeof 还 会 返回 unknown 的 情 
况 。 


if (typeof window.ActivexObject != "undefined") { 
var xhr = new ActivexObject("Msxml2.XMLHTTP"); 
alert(typeof xhr.abort); 


} 








其 于 这 IE 的 特性 ， 我 们 可 以 用 它 来 判定 某 个 
VBscript 方 法 是 否 存在 。 


<script type="text/VBScript"> 
function VBMethod(a,b) 
VBMethod = a + b 

end function 

</script> 


<script> 


unknown" ) {// 43x74 
alert(VBMethod(10, 34) ) 


</script> 





另外 ， 以 前 人 们 总 是 以 document.all 是 否 存 在 来 
判定 正 ， 这 其 实 是 很 危险 的 。 因 为 用 document.all 来 


EAS OUTED HAN APA JOA ee Mg Ek, AADA 
Firefox. Chromed t MIA J, ANI ATT ABI Fl 
XE, +724 I 4EChrome F HZ E “lil EI”. 





typeof document.all // undefined 
document.all // HTMLA11Collection[728] (728 A7tK ER 











Œ #llEundefined. null, string. number, 
boolean 和 function 这 6 个 还 算 简 单 ， 前 面 2 个 可 以 分 
别 与 void〈0) 、null 比 较 ， 后 面 4 个 直接 typeof 也 可 
满足 90% 的 情形 。 这 样 说 是 因为 string、number、 
boolean 可 以 包装 成 “ 伪 对 象 ?””typeof 无 法 按照 我 们 
的 意愿 工作 了 ， 虽 然 它 严格 执行 了 Ecmascript 的 标 
{EE 


typeof new Boolean(1);//"object" 
typeof new Number(1);//"object" 
typeof new String("aa");//"object" 








这 些 还 是 最 简单 的 ， 难 点 在 于 RegExp 与 


Array。 判 定 RegExp 类 型 的 情形 很 少 ， 不 多 讲 了 ， 
Array 则 不 一 样 。 有 关 isArray 的 实现 方法 不 下 20 
种 ， 都 是 因为 JavaScript 的 鸭子 类 型 被 攻破 了 。 


以 下 代码 是 isArray 早 些 年 的 探索 。 





function isArray(arr) { 
return arr instanceof Array; 


J 


function isArray(arr) { 
return !!arr && arr.constructor == Array; 


} 


function isArray(arr) {//Prototype.js1.6.0.3 
return arr != null && typeof arr === "object" && 
‘splice’ in arr && 'join' in arr; 


} 


function isArray(arr) {//Douglas Crockford 
return typeof arr.sort == 'function' 


J 


function isArray(array) {//kriszyp 
var result = false; 
try { 
new array.constructor(Math.pow(2, 32)) 
} catch (e) { 
result = /Array/.test(e.message) 
} 


return result; 


}; 


function isArray(o) {// kangax 
try { 
Array.prototype.toString.call(o); 
return true; 
} catch (e) { 


return false; 


}; 


function isArray(o) {//kangax 
if (o && typeof o == 'object' && typeof o.length == 'number 
' && isFinite(o.length)) { 
var _origLength = o.length; 
o[o.length] = '_test__'; 
var _newLength = o.length; 
o.length = _origLength; 
return _newLength == _origLength + 1; 


return false; 





至 于 nul、undefined、NaN 则 比较 好 对 付 。 


function isNaN(obj) { 
return obj !== obj 

} 

function isNull(obj) { 
return obj === null; 


} 


function isUndefined(obj) { 
return obj === void 0; 


} 





这 一 切 烦 恼 ， 直 到 Prototype.js 把 
Object.prototype.toString 发 气 出 来 才 被 彻底 克服 。 此 
方法 是 直接 输出 对 象 内 部 的 [[Class]]， 绝 对 精准 。 


有 了 它 ， 可 以 跳 过 95% 的 陷阱 了 。 当 然 ，toString 
方法 只 能 针对 原生 数据 类 型 ， 像 如 何 检 测 是 否 大 
window、 是 否 为 纯净 JavaScript 对 象 ， 就 有 点 力 不 
eee 


由 于 ECMA 是 不 规范 Host 对 象 ，window 对 象 属 
于 Host， 所 以 也 没有 被 约定 ， 残 算 Object. 
prototype.toStringt x} €E ACH AS 


[object Object] IE6 
[object Object] IE7 
[object Object] IE8 
[object Window] IE9 
[object Window] firefox3.6 


[object Window] opera10 
[object DOMWindow] safai4.04 
[object global] chrome5.0.3.22 








不 过 根据 window.window 和 window.setInterval 
去 判定 更 加 不 徘 详 ， 用 一 个 技巧 我 们 可 以 完美 识别 
IE6、IE7、IE8 的 window 对 象 ， 其 他 还 是 用 
toString。 这 个 神奇 的 hack( 技 巧 ) 就 可 以 ， 
window 与 document 互 相 比 较 ， 如 果 顺 序 不 一 样 ， 其 





结果 是 不 一 样 的 ! 


window == document // IE678 true; 
document == window // IE678 false; 








当然 ， 如 果 细 数 起 来 ，JavaScript 罪 夷 所 思 的 事 


比比 省 是 。 


存在 a !== a 的 情况 ; 
存在 a == b && b != a 的 情况 ; 
存在 a == !a 的 情况 ; 

存在 a === a+100 的 情况 ; 

1 < 2 < 3 为 true, 3 > 2 > 1 为 false:; 

















男 一 个 比较 常用 的 判定 isArrayLike 方 法 ， 这 用 
于 人 裔 历 方 法 ， 通 常 叫 做 each， 它 可 能 循环 对 象 与 类 
数组 对 象 。 


好 了 ， 我 们 看 一 下 各 大 框架 有 多 少 isxxx 方 
法 ， 哪 些 是 最 常用 的 ， 方 便 我 们 的 框架 也 能 包含 它 
们 ， 如 表 1-1 所 示 。 





421-1 


; isElement. isArray, isHash, isFunction, isString, isNumber, isDate, 
Prototype.js 
isUndefined 
nme Jono instanceOf 判 定 自 定义 “类 ?” 
RightJS isFunction、isHash、isString、isNumber、isArray、isElement、isNode 








isEmpty. isArray、 isDate、isObject、isSimpleObject、isPrimitive、 
EXT isFunction、isNumber、isNumeric、isString、isBoolean、isElement、 
isTextNode, isDefined, isIterable 
isElement, isEmpty, isArray, isArguments, isObject, isFunction, isStrings 
Underscore.js | isNumber, isFinite, isNaN. isBoolean, isDate, isRegExp. isNull, 
isUndefined 
iQ isFunction、isArray、isPlainObject、isEmptyObject、isWindow、isNumeric、 
jQuery 
isNaN、isXML 
pte foci isObject, isPlainObject. isWindow, isVML 


1.5.1 type 








我 们 比较 一 下 ， 发 现 jQuery 针 对 基础 类 型 的 


isXXX 是 很 少 的 ， 只 是 isFunction 与 isArray。 其 他 都 
是 很 特别 的 业务 判定 。 完 其 原因 ， 是 因为 jQuery 发 
明 type 方 法 ， 这 个 方法 就 圳 括 了 isBoolean、 


isNumber、 isString. isFunction, isArray, isDate, 











isRegExp. isObject XisError. 


//jquery2.0 
var class2type 
// Populate the class2type map 
jQuery.each("Boolean Number String Function Array Date RegExp 0 
bject Error".split(" "), function(i, name) { 
class2type[ "[object " + name + "]" ] = name.toLowerCase(); 


}); 


jQuery.type = function( obj ) { 
if ( obj == null ) { 
return String( obj ); 


} 
// Support: Safari <= 5.1 (functionish RegExp) 
return typeof obj === "object" || typeof obj === "function" 


? 


class2type[ core_toString.call(obj) ] || "object" : 
typeof obj; 





这 个 方法 也 不 断 进化 ， 因 为 ES6 也 加 入 了 新 的 
数据 类 型 Symbol。 


此 外 ，isXXX 系 列 随 着 框 染 版 本 的 提升 ， 也 会 


AOL RS VE SHB — PEAS i HR, ESE IR SRLS 
isXXX 也 不 能 满足 用 户 的 全 部 需求 。 束 和 像 isDate、 
isRegExp 会 用 到 的 概率 有 多 高 呢 ? 





下 面 我 们 回溯 一 下 jQuery 的 发 展 历 程 ， 看 它 是 
怎么 扩张 目 己 的 isXXX 系 列 的 。 


1.5.2 isPlainObject 


在 jQuery 1.4 中 只 有 isFunction、isArray、 
isPlainObject#llisEmptyObject. IsFunction#lisArray 
肯定 是 用 户 用 得 最 多 。isEmptyObject 是 用 于 数据 组 
存 系 统 ， 当 此 对 象 为 空 时 ， 残 可 以 删除 它 。 
isPlainObject 则 是 用 来 判定 是 否 为 纯净 的 JavaScript 
对 象 ， 既 不 是 DOM、BOM 对 象 ， 也 不 是 自 定 
义 “ 类 ”的 实例 对 象 ， 制 造 它 的 最 初 目 的 是 用 于 深 找 
贝 ， 避 开 像 window 那 样 自 己 引 用 目 己 的 对 象 。 











//jQuery2.0 
jQuery.isPlainObject = function(obj) { 
// 首 先 排除 基础 类 型 不 为 0bject 的 类 型 ， 然 后 是 DOM 节 点 与 Window 对 象 
if (jQuery.type(obj) !== "object" || obj.nodeType || jQuery 





.isWindow(obj)) { 
return false; 





} 
// 然 后 回溯 它 的 最 近 的 原型 对 象 是 否 有 isPrototypeof， 
// 旧 版 本 IE 的 一 些 原生 对 象 没 有 暴露 constructor、prototype， 因 此 会 在 这 
里 过 滤 
try { 
if (obj.constructor && 
!hasOwn.call(obj.constructor.prototype, "isProt 














otypeOf")) { 
return false; 


} 
} catch (e) { 
return false; 
} 


return true; 


} 


//jQuery2.2 变 得 更 加 严密 ， 并 且 放 弃 try catch 以 提高 性 能 
jQuery.isPlainObject = function(obj) { 
var key; 
if ( jQuery.type( obj ) !== "object" || obj.nodeType | | 
jQuery.isWindow( obj ) ) { 
return false; 





} 


// Not own constructor property must be Object 
if ( obj.constructor && 
!hasOwn.call( obj, "constructor" ) && 
!hasOwn.call( obj.constructor.prototype || {}, 
"isPrototypeOf" ) ) { 
return false; 


} 

// Own properties are enumerated firstly, so to speed u 
// if last one is own, then all properties are own 

for ( key in obj ) {} 

return key === undefined || hasOwn.call( obj, key ); 
} 


//jQuery3.0 放弃 对 IE6-8 的 支持 ， 因 此 可 以 直接 用 Object .getPrototype0f 方 


YB 























// 并 且 也 无 需 特殊 处 理 window 





var fnToString.call = hasOwn.toString; 
var ObjectFunctionString = fnToString.call( Object ); 
var toString = class2type.toString; 
var hasOwn = class2type.hasOwnProperty; 
var getProto = Object.getPrototypeOf; 
jQuery.isPlainObject = function( obj ) { 

var proto, Ctor; 


// Detect obvious negatives 

// Use toString instead of jQuery.type to catch host obj 
ects 

if ( !obj || toString.call( obj ) !== "[object Object]" 
) I 


return false; 


} 
proto = getProto( obj ); 


// Objects with no prototype (e.g., Object.create( null 
) ) are plain 
if ( !proto ) { 
return true; 


} 


// Objects with prototype are plain iff they were constr 
ucted by a global Object function 
Ctor = hasOwn.call( proto, "constructor" ) && proto.cons 
tructor; 
return typeof Ctor === "function" && fnToString.call( Ct 
or ) === ObjectFunctionString; 





在 avalon 中 有 一 个 更 精简 的 版 本 ， 由 于 它 只 文 
持 IE10 等 非常 新 的 浏览 妖 及 不 支持 跨 iframe， 束 没 
有 干扰 因素 了 ， 可 以 大 胆 使 用 ecma262v5 的 新 API。 





avalon.isPlainObject = function(obj) { 
return typeof obj === "object" && Object.getPrototypeOf (obj 


) === Object.prototype 
} 


补充 一 句 ，1.3 版 本 中 ，Prototype.js 的 研究 成 果 
(Object.prototype.toString.call) 束 应 用 于 jQuery 
了 。 在 1.2 版 本 中 ，jQuery 判 定 一 个 变量 是 售 为 函数 
FERR. 








jQuery.isFunction = function( fn ) { 
return !!fn && typeoffn != "string" && !fn.nodeName && 
fn.constructor != Array && /A[\s[]?function/.test( fn + "" 


); 
} 





1.5.3 isWindow 


jQuery 1.435] AisWindow¥ Ab#4 make Array F 
对 window 的 判定 ， 引 入 isNaN 用 于 确保 样式 赋值 的 
安全 。 同 时 引入 type 代 蔡 typeof 关 键 字 ， 用 于 获取 数 
据 的 基本 次 型 。 








var isWindow = function( obj ) { 
return obj != null && obj === obj.window; 


} 


jQuery 这 个 判定 是 非常 粗糙 ， 通 过 不 了 伪造 的 
对 象 。 


var fakeWindow = {} 
fakeWindow.window = fakeWindow 
$.isWindow(fakeWindow) //true， 这 里 骗 过 jQuery 了 !!! 




















对 比 一 下 avalon 的 实现 5! , 


avalon.isWindow = function (obj) { 
if (!obj) 
return false 
// 利用 IE6、IE7、IE8 window == document Atrue, document == win 
dow 竞 然 为 false 的 神奇 特性 
// 标准 浏览 器 及 IE9、IE10 等 使 用 正则 检测 
return obj == obj.document && obj.document != obj 





} 


var rwindow = /4\[object (?:Window|DOMWindow|global)\]$/ 


function isWindow(obj) {// 现 代 浏 览 器 使 用 这 个 实现 


return rwindow.test(toString.call(obj) ) 


} 


if (isWindow(window)) { 
avalon.isWindow = isWindow 


} 





1.5.4 isNumeric 


jQuery1.7 中 添加 isNumeric 代 蔡 isNaN。 这 是 个 
不 同 于 其 他 框架 的 isNumber， 它 可 以 是 字符 串 ， 只 
要 外 观 上 像 数 字 束 行 了 。 但 jQuery1.7 还 做 了 一 件 违 
背 之 前 提 到 稳定 性 的 事情 ， 贸 然 去 挥 
jQuery.isNaN， 因 此 导致 基于 旧版 本 jQuery 的 一 大 
批 插 件 失 效 。 





//jquery1.43~1.64 
jQuery.isNaN = function(obj) { 
return obj == null || !rdigit.test(obj) || isNaN(obj); 
}) 
//jquery1.7 就 是 jsNaN 的 取 反 版 
jQuery.isNumeric = function(obj) { 
return obj != null && rdigit.test(obj) && !isNaN(obj); 
}) 
//jquery1.71~1.72 
jQuery.isNumeric = function(obj) { 
return !isNaN(parseFloat(obj)) && isFinite(obj); 


} 

//jquery2.1 

jQuery.isNumeric = function(obj) { 
return obj - parseFloat(obj) >= 0; 





1.5.5 isArrayLike 


此 外 ，jQuery 还 有 一 个 没有 公开 的 isXXX 一 一 


isArrayLike。 由 于 一 个 类 数组 太 难 了 ， 唯 一 的 辨识 
手段 是 它 应 该 有 一 个 大 于 或 等 于 零 的 整 型 lang 中 属 
性 。 此 外 ， 还 有 一 些 * 共 识 ”， 如 window 与 函数 和 元 
系 节 点 〈 如 form 元 素 ) 不 算 类 数组 ， 虽 然 它 们 都 满 
足 前 面 的 条 件 。 因 此 ， 至 今 jQuery 也 没有 把 它 暴 露 
出 来 。 














//jquery2.0 
function isArraylike(obj) { 
var length = obj.length, type = jQuery.type(obj); 
if (jQuery.isWindow(obj)) { 
return false; 


} 
if (obj.nodeType === 1 && length) { 
return true; 
} 
return type === "array" || type !== "function" && 
(length === 0 || 
typeof length === "number" && length > 0 && 

(length - 1) in obj); 


} 


//jQuery3.0 
function isArrayLike( obj ) { 


// Support: real 10S 8.2 only (not reproducible in simulato 
r) 
// ‘in' check used to prevent JIT error (gh-2145) 
// hasOwn isn't used here due to false negatives 
// regarding Nodelist length in IE 
var length = !!obj && "length" in obj && obj.length, 
type = jQuery.type( obj ); 


if ( type === "function" || jQuery.isWindow( obj ) ) { 
return false; 


} 


return type === "array" || length === 0 || 
typeof length === "number" && length > 0 && ( length - 
1 ) in obj; 


J 








avalon 也 独立 发 展 出 目 己 的 isArrayLike 方 法 ， 
但 也 不 敢 骏 露出 来 。 





//avalon 1.4 
var toString = class2type.toString 
var rarraylike = /(Array|List|Collection|Map|Arguments)\]$/ 
var rfunction = /4\s*\bfunction\b/ 
function isArrayLike(obj) { 
if (!obj) 
return false 
var n = obj.length 
if (n === (n >>> 0)) { // 检 测 length 属 性 是 否 为 非 负 整 数 
var type = toString.call(obj).slice(8, -1) 
if (rarraylike.test(type) ) 
return false 





if (type === 'Array') 
return true 
try { 


if ({}.propertyIsEnumerable.call(obj, 'length') === 
false) { // 如 果 是 原生 对 象 


return rfunction.test(obj.item || obj.callee) 
} 


return true 
} catch (e) { //IEMNodeList Bent 
return !obj.window //IE6-8 window 
} 





} 


return false 


J 


//avalon.mobile # f #Object.prototoype. toStringRHl€ 





function isArrayLike(obj) { 
if (obj && typeof obj === 'object') { 
var n = obj.length, 
str = toString.call(obj) 
if (rarraylike.test(str)) { 
return true 
} else if (str === '[object Object]' && n === (n >>> 0) 

















) { 
// 由 于 ecma262v5 能 修改 对 象 属性 的 enumerable， 因 此 不 能 用 propert 
yIsEnumerable 来 判定 了 
return true 
} 





return false 





jQuery 的 isXML 方 法 ， 有 一 段 有 趣 的 发 展 历 
程 ， 这 个 将 在 第 6 章 详 解 ， 这 里 略 过 


avalon 的 isYML 方 法 ， 也 就 avalon 这 种 偏执 于 莱 
容 性 的 框架 ， 才 会 发 掘 出 这 样 的 函数 。 


function isVML(src) { 
var nodeName = src.nodeName 


return nodeName. POP Oneness) === nodeName && src.scopeName 
&& src.outerText === ' 


} 





基于 实用 主义 ， 我 们 有 时 不 得 不 妥协 。 百 度 的 


tangram 就 是 典型 ， 与 EXT 一 样 ， 能 想到 的 都 写 上 ， 
if AA ESE AS E. 


baidu.isDate = function(o) { 

return {}.toString.call(o) === "[object Date]" && o.toStrin 
g() !== 'Invalid Date' && !isNaN(0o); 
} 


baidu.isNumber = function(o) { 


return '[object Number]' == {}.toString.call(o) && isFinite 
(0); 
} 





1.6 domReady 


domReady 其 实 是 一 种 名 为 DOMContentLoaded 
事件 的 别称 。 不 过 由 于 框架 的 需要 ， 它 与 真正 的 
DOMContentLoaded 有 一 点 区 别 。 在 许多 JavaScript 
书籍 中 ， 它 们 都 会 教导 我 们 把 JavaScript 逻 辑 写 在 
window.onload 回 调 中 ， 以 防 DOM 树 还 没有 建 完 就 
开始 对 市 点 进行 操作 ， 导 致 出 错 。 而 对 于 框 涤 来 
说 ， 越 早 介 入 对 DOM 的 干涉 就 越 好 ， 例 如 要 进行 
特征 侦 测 之 类 的 。domReady 还 可 以 满足 用 户 提 前 
绑 定 事件 的 需求 。 因 为 有 时 网 页 的 网 片 等 资源 过 
多 ，window.onload 残 迟 迟 不 能 触 肥 ， 这 时 在 还 没有 
绑 定 事件 ， 用 户 点 击 哪个 按钮 都 没 反 应 《除了 跳 转 
页 面 )。 因 此 主流 框架 都 引入 domReady 机 制 ， 并 
AB SIR KSAT AD as, HARKU F o 














(1) 对 于 支持 DOMContentLoaded 事 件 的 使 用 
DOMContentLoaded 事 件 。 


(2) 旧版 本 I 下 使 用 Diego Perini 发 现 的 著名 
hack! 


//http://javascript.nwbox.com/IEContentLoaded/ 
//by Diego Perini 2007.10.5 
function IEContentLoaded(w, fn) { 
var d = w.document, done = false, 
init = function() { 
if (!done) {// 只 执行 一 次 
done = true; 
fn(); 


} 
ti 
(function() { 
try {// 在 DOM 未 建 完 之 前 调用 元 素 doScroll 抛 出 错误 
d.documentElement.doScroll('left'); 
} catch (e) {// 延 迟 再 试 
setTimeout(arguments.callee, 50); 
return; 











} 
init();// 没 有 错误 则 执行 用 户 回 调 
DO; 
// 如 果 用 户 是 在 domReady 之 后 绑 定 这 个 函数 ， 则 立即 执行 它 
d.onreadystatechange = function() { 
if (d.readyState == 'complete') { 
d.onreadystatechange = null; 
init(); 











//http://webreflection.blogspot .com/search?q=onContent 
//by Andrea Giammarchi 2006.9.24 
AR id=__ie onload defer src=//0><\/scr" + 
"ipt>"); 

script = document.getElementById(" ie onload"); 
script.onreadystatechange = function() {//IE 即 使 是 死 链 也 能 触发 事 





if (this.readyState == "complete"){ 
init(); // 指定 了 defer 的 Script 会 在 DOM 树 建 完 才 触 发 








}; 
} 








不 过 有 个 问题 ， 如 果 我 们 的 种 子 模块 是 动态 加 
a 在 它 插 入 DOM 树 时 ，DOM 树 已 经 建 完了 ， 

获 怎 么 触发 我 们 的 ready 回 调 昵 ? jQuery 给 出 的 方 
案 是 ，onload 也 一 起 被 监听 。 但 是 如 有 果 用 户 的 脚本 
是 onload 之 后 才 加 载 进 来 呢 ? 那么 只 好 判定 一 
下 document.readyState 773: J-complete ， 如 果 
是 ， 则 说 明 页 面 早 就 domReady， 可 以 执行 用 户 的 
回调 。 不 过 ， 这 个 “保险 丝 ” 还 是 存在 问题 ， 因 为 
Firefox 3.6 没 有 document.readyState ne 那么 我 
们 来 看 avalon 给 出 的 方案 。 




















var readyList = []; 
avalon.ready = function(fn) { 
if (readyList) { 
readyList.push(fn); 


} else { 


fn(); 
} 
var readyFn, ready = W3C ? "DOMContentLoaded" : "readystatechan 
ge"; 


function fireReady() { 
for (var i= 0, fn; fn = readyList[i++]; ) { 


fn(); 
readyList = null; 
fireReady = avalon.noop; // 惰 性 函数 ， 防 止 IE9 二 次 调用 _checkDeps 





} 


function doScrollCheck() { 
try { //IE 下 通过 doScrollCheck 检 测 DOM 树 是 否 建 完 
html.doScroll("left"); 
fireReady(); 
} catch (e) { 
setTimeout(doScrollCheck) ; 





} 
} 


// 在 Firefox 3.6 之 前 ,不 存在 readyState 属 性 
//http://www.cnblogs.com/rubylouvre/archive/2012/12/18/2822912. 
html 
if (!DOC.readyState) { 

var readyState = DOC.readyState = DOC.body ? "complete" : " 
loading"; 


—= 





} 
if (DOC.readyState === "complete") { 
fireReady(); // 如 果 在 domReady 之 外 加 载 
} else { 
avalon.bind(DOC, ready, readyFn = function() { 
if (W3C || DOC.readyState === "complete") { 


fireReady(); 
if (readyState) { //IE 下 不 能 改写 Doc ,readyState 
DOC.readyState = "complete"; 


J 


}); 
if (html.doScroll) { 
try { // 如 果 跨 域 会 报错 ， 那 时 肯定 证 明 是 存在 两 个 窗口 的 
if (self.eval === parent.eval) { 
doScrollCheck(); 











} 
} catch (e) { 
doScrollCheck(); 





1.7 无 冲突 处 理 


无 冲突 处 理 也 称 为 多 库 共存 。 不 得 不 说 ，$ 是 
最 重要 的 函数 名 。 许 多 框架 都 爱 用 和 它 作 为 自己 的 命 
名 空间 。 在 jQuery 还 比较 弱小 时 ， 如 何 让 人 们 试用 
它 呢 ? 当时 Prototype 是 主流 ， 于 是 jQuery 及 明 了 
noConflict 函 数 ， 下 面 是 源 代 码 。 








window = this, 
undefined, 
_jQuery = window. jQuery, 


_$ = window.$, 
// 把 window 存 入 闭 包 中 的 同名 变量 ， 方 便 内 部 函数 在 调用 window 时 不 用 费 
大 力气 查找 它 
//_ jQuery 与 _$ 用 于 以 后 重 写 
jQuery = window. jQuery = window.$ = function(selector, c 
ontext) { 
// 用 于 返回 一 个 jQuery 对 象 


return new jQuery.fn.init(selector, context); 




















jQuery.extend({ 
noConflict: function(deep) { 
ro /V/ 引 入 jQuery 类 库 后 ， 闭 包 外 面 的 window.$ 与 window, jQuery 都 储存 着 
一 个 图 妆 
// 它 是 用 来 生成 jQuery 对 象 或 在 domReady 后 执行 其 中 的 函数 
// 回 顾 最 上 面 的 代码 ， 在 还 没有 把 function 赋 给 它们 时 ，_jQuery 与 _$ 已 
经 被 赋值 了 
// 因 此 它们 俩 的 值 必然 是 undefined 
// 因 此 这 种 放弃 控制 权 的 技术 很 简单 ， 就 是 用 undefined 把 window.$ 里 面 
的 jQuery 系 的 函数 清除 








// 这 时 Prototype 或 mootools 的 $ 就 可 以 了 

window.$ = _$;// 相 当 于 window.$ = undefined 

// 这 时 就 要 为 noCconflict 添 加 一 个 布尔 值 ， 为 true 

if (deep) 
// 但 我 们 必须 使 用 一 个 接纳 jQuery 对 象 与 jQuery 的 入 口 函数 
// 闭 包 里 面 的 内 容 除非 被 window 等 宿主 对 象 引用 ， 否 则 就 是 不 可 见 的 
// 因 此 我 们 把 闭 包 里 面 的 jQuery return 出去， 外 面 用 一 个 变量 接纳 








就 可 以 
window. jQuery = _jQuery;//44-4window. jQuery = undefi 
ned 
return jQuery; 
} 
}); 





使 用 时 ， 先 引入 其 他 的 库 ， 然 后 引入 jQuery， 
调用 $.noconflict() 进行 改名 ， 这 样 就 不 影响 其 他 
人 HSTE T e 


种 子 模块 是 一 个 非常 核心 的 模块 ， 其 中 包含 了 
近 20 年 来 JavaScript 积 累 的 最 常用 的 函数 与 功能 ， 大 
家 务必 学 好 ， 这 也 是 面试 时 的 常 考 的 内 容 。 





[1] AMD 全 称 是 Asynchronous Module Definition, 
即 异 步 模 块 加载 机 制 。 从 它 的 规范 描述 页 面 看 ， 
AMD 很 短 也 很 简单 ， 但 它 却 完整 换 述 了 模块 的 定 
义 、 依 赖 天 系 、 引 用 关系 以 及 加 载 机 制 。 从 它 被 
RequireJS、Node.js、dojo、jQuery 的 使 用 中 也 可 以 
看 出 它 其 有 很 大 的 价值 。 





[2] “CommonJS 规 范 是 JavaScript 在 服务 缉 端的 规 
范 ，Node.js 采 用 了 这 个 规范 。 根 据 CommonJS 规 

范 ， 一 个 单独 的 文件 束 是 一 个 模块 。 加 载 模块 使 用 
reduire 方 法 。 讼 方法 该 取 一 个 文件 并 执行 ， 最 后 返 





回 文件 内 部 的 exports 对 象 。CommonJS 构 建 的 这 和 套 
模块 导出 和 引入 机 制 使 得 用 户 完 全 不 必 考 虑 变量 污 
染 、 命 名 空间 等 方案 与 之 相 比 相形 见 红 。 








[3] ”在 ES5 之 前 ，JavaScript 没 有 内 置 的 机 制 来 指定 
或 者 检查 对 象 某 个 属性 (property〉 的 特性 
(characteristics〉， 例 如 某 个 属性 是 只 读 
(readonly〉 的 或 者 不 能 被 枚 淮 Cenumerable) 的 。 
但 是 在 ES5 之 后 ，JavaScript 被 赋予 了 这 个 能 力 ， 所 
有 的 对 象 属性 都 可 以 通过 属性 描述 符 (Property 
Descriptor) 来 指定 。 





[4] ”Polyfilling 是 由 RemySharp 提 出 的 一 个 术语 ， 

它 是 用 来 描述 复制 缺少 的 API 和 API 功 能 的 行为 。 你 
可 以 使 用 它 编写 单独 应 用 的 代码 ， 而 不 用 担心 其 他 
浏览 喜 原 生 是 不 是 文 持 。 实 际 上 ，polyfills 并 不 是 
新 技术 ， 也 不 是 和 HTML5 捆 绑 到 一 起 的 。 我 们 已 
ZÆ Uljson2.js. ie7-js#ll TIENI bi as te Pei HY PNG X 








持 的 JS 中 使 用 过 了 。 而 和 现在 polyfills 的 区 别 就 是 新 
增 的 HTML5 polyfills。 


[5] ”我 也 写 过 一 篇 博文 专门 探索 这 问题 
http://www.cnblogs.com/rubylouvre/archive/2010/02/2( 
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1995 年 ，Brendan Eich 读 完了 在 程序 语言 设计 
中 曾经 出 现 过 的 所 有 错误 ， 目 己 又 发 现 了 一 些 更 多 
的 错误 ， 然 后 用 它们 创造 出 了 LiveScript。 之 后 ， 为 





了 紧 跟 Java 语 言 的 潮流 ， 它 被 重新 命名 为 
JavaScript. FA, A E-A Be ops HY E A 
字 ， 这 个 语言 又 命名 为 ECMAScript。 


上 面 一 段 话 出 目 博 文 《 编 程 语言 伪 简 史 》。 可 


HL, JavaScripts 2 2A RNG, ESI 
BARKS. HOF aL, JavaScript hit A va 
足 之 处 。 由 于 互联 网 的 传播 性 及 浏览 器 三 商 大 战 ， 

JavaScript 之 父 失 去 了 对 此 门 语言 的 掌控 权 。 即 便 他 
想 修复 这 些 bug 或 推出 霖 些 新 特性 ， 也 要 所 有 浏览 
as) 商都 点 头 才 行 。IE6 的 市 场 独占 性 ， 打 破 了 他 
的 著 望 。 这 个 局 面 直 到 Chrome 诞 生 ， 才 有 上 所 改善 。 





但 在 下 6 时 期 ， 浏 虎 志 提供 的 原生 API 数 量 是 极 
其 贫乏 的 ， 因 此 各 个 框架 都 创造 了 许多 方法 来 弥补 
这 缺陷 。 视 框架 作者 原来 的 语言 背景 不 同 ， 这 些 方 
法 也 是 林林总总 。 其 中 最 杰出 的 代表 是 王者 
Prototype.js， 把 ruby 语 言 的 那 一 套 方 式 或 范式 搬 过 
来 ， 从 底层 促进 了 JavaScript 的 发 展 。ECMA262V6 
USPS — HES APB. MEADE, BARS MENT A 
字 而 已 。 














即便 是 浏览 器 的 API 也 不 能 尽 信 ， 尤 其 是 IE6、 


IE7、 下 8 到 处 是 bug。 早 期 出 现 的 各 种 “JS 库 ?， 例 如 
远古 的 prototype、 中 十 的 mootools， 到 近代 的 
jQuery， 再 到 大 规模 、 紧 封装 的 YUIL 和 Extjs， 很 大 
的 一 个 目标 就 是 为 了 填 “ 莱 容 性 ”这 个 “大 坑 ”。 





在 avalon2 中 ， 就 提供 了 许多 市 compact 命 名 的 
模块 ， 它 们 就 是 专门 用 于 修复 古老 浏览 器 的 兼容 性 
问题 。 此 外 ， 本 章 也 介绍 了 一 些 非常 底层 的 知识 
点 ， 能 让 读者 更 熟悉 这 门 语言 。 











2.1 字符 种 的 扩展 与 修复 








笔者 发 现 脚本 语言 都 对 字符 串 特 别 天 注 ， 有 关 
它 的 方法 特别 多 。 笔 者 把 这 些 方法 分 为 三 大 类 ， 如 
图 2-1 所 示 。 





© © 
当前 原型 链 的 非 标签 方法 上 级 原型 链 的 方法 


ES3 ESS ES6 toString valueOf 





当前 原型 链 的 标签 方法 不 推荐 使 用 ) 





图 2-1 





是 诞生 了 一 些 方法 ， 如 anchor、big、blink、bold、 


fixed. fontcolor. italics. link, small. strike. sub 


及 sup。 


剩 下 的 就 是 charAt、charCodeAt、concat、 


indexOf. lastIndexOf. localeCompare. match, 


replace, search, slice, split. substr, substring, 
toLocaleLowerCase. toLocaleUpperCase, 


toLowerCase、toUpperCase 及 从 Object 继承 回来 的 方 
法 ， 如 toString、valueOf 。 


鲜 为 人 知 的 是 ， 数 值 的 toString 有 一 个 参数 ， 通 
过 它 可 以 转换 为 进行 进 制 的 数值 ， 如 图 2-2 所 示 。 


© Y top v Preserve log 


Regex Hide network messages 


(907). toString(32) 
"sb" 


图 2-2 


但 相对 于 其 他 语言 ，JavaScript 的 字符 串 方 法 可 
以 说 是 十 分 贫乏 的 ， 因 此 后 来 的 ES5、ES6 又 加 上 
本 二 站) 





即便 这 样 ， 也 很 难 满足 开发 需求 ， 比 如 说 新 增 
的 方法 就 远 水 救 不 了 近 火 。 因 此 各 大 名 库 都 提供 了 





一 大 堆 操 作 字 人 符 串 的 方法 。 我 综合 一 下 Prototype、 
mootools, dojo. EXT. Tangram, RightJSH)—#277 
法 ， 进 行 比较 去 重 ， 在 mass Framework A TIFE Ys 
加 如 下 扩展 : contains、startsWith、endsWith、 








repeat、camelize、underscored、 capitalize. 
stripTags. stripScripts. escapeHTML, 
unescapeHTML,. escapeRegExp, truncate. wbr, 
pad， 写 框架 的 读者 可 以 视 目 己 的 情况 进行 增 减 ， 

如 图 2-3 所 示 。 其 中 前 4 个 是 ECMA262V6 的 标准 方 
法 ; 接着 9 个 发 端 于 Prototype.js 广 受 欢迎 的 工具 方 
法 ; wbr 则 来 自 Tangram ， 用 于 软 换行 ， 这 是 出 于 
汉语 排版 的 需求 。pad 也 是 一 个 很 党 用 的 操作 ， 已 
被 收录 ， 如 图 2-3 所 示 。 


starts With 
















capitalize 
endsWith 
dasheize 
contains (BKM includes) O ES6 | 风格 转换 
camelize 
pad (或 叫 fillZero) 
underscored 
io aa String 扩展 stripTags 
tim SL_ESS_) 
stripScripts 


quote (firefox 的 私有 实现 ) 





Of 标签 处 理 ] escapeHTML 


unescapeHTML 
l 
wbr 
@ 正则 处 理 escapseRegExp 


图 2-3 


到 了 另 一 个 框架 avalon2 ， 笔 者 的 方法 也 有 用 
武之 地 ， 或 者 改 成 avalon 的 静态 方法 ， 或 者 作为 
ECMA262V6 的 补丁 模块 ， 或 者 作为 过 滤器 《如 


camelize、truncate ) 。 


各 种 方法 实现 如 下 。 





contains 方法 : 判定 一 个 字符 串 是 否 包 含 男 一 
个 字符 串 。 和 常规 思维 是 使 用 正则 表达 式 。 但 每 次 部 
要 用 new RegExp 来 构造 ， 性 能 太 差 ， 转 而 使 用 原生 
字符 串 方 法 ， 如 indexOf、lastIndexOf、search 。 








function contains(target, it) { 
//indexofiuksearch, lastIndexof th 477438 
return target.indexOf(it) != -1; 





} 








在 Mootools 版 本 中 ， 笔 者 看 到 它 文 持 更 多 参 
数 ， 估 计 目 的 是 判定 一 个 元 系 的 className 是 否 包 
含 菜 个 特定 的 cdlass。 众 所 周知 ， 元 系 可 以 添加 多 个 
class， 中 间 以 空格 隔 开 ， 使 用 mootools 的 contains 残 
能 很 方便 地 检测 包含 关系 了 。 


S 


function contains(target, str, separator) { 
return separator ? 
(separator + target + separator ).indexOf(separator 
+ str + separator) > -1 : 


target.indexOf(str) > -1; 


} 








startsWith 方 法 : 判定 目标 字符 串 是 售 位 于 原 
字符 串 的 开始 之 处 ， 可 以 说 是 contains 方 法 的 变 
种 。 


// 最 后 一 个 参数 是 忽略 大 小 写 
function startswith(target, str, ignorecase) { 

var start_str = target.substr(0, str.length); 

return ignorecase ? start_str.toLowerCase() === str.toLower 
Case() : 


start_str === str; 


} 





endsWith 方 法 : 与 startsWith 方 法 相反 。 


// 最 后 一 个 参数 是 忽略 大 小 写 
function endsWith(target, str, ignorecase) { 
var end_str = target.substring(target.length - str.length); 
return ignorecase ? end_str.toLowerCase() === str.toLowerCa 
se() : 
end_str === str; 


} 





2.1.1 repeat 


repeat 方 法 : 将 一 个 字符 串 重 复 目 身 N 次 ， 如 
repeat "ruby", 2) 得 到 rubyruby。 


版 本 1: 利用 空 数组 的 join 方 法 。 


function repeat(target, n) { 
return (new Array(n + 1)).join(target); 
} 


版 本 2: 版 本 1 的 改 民 版 。 创 建 一 个 对 象 ， 使 其 
拥有 length 属 性 ， 然 后 利用 call 方 法 去 调用 数组 原型 
的 join 方 法 ， 省 去 创建 数组 这 一 步 ， 性 能 大 为 提 
高 。 重 复 次 数 越 多 ， 两 者 对 比 越 明 显 。 男 外 ， 之 所 
以 要 创建 一 个 带 length 属 性 的 对 象 ， 是 因为 要 调用 
数组 的 原型 方法 ， 需 要 指定 call 的 第 一 个 参数 为 类 
数组 对 象 ， 而 类 数组 对 象 的 必要 条 件 是 其 length 属 
性 的 值 为 非 负 整 数 。 














function repeat(target, n) { 
return Array.prototype. join.call({ 
length: n+ 1 


}, target); 





版 本 3: 版 本 2 的 改 恨 版 。 利 用 闭 包 将 类 数组 对 








象 与 数组 原型 的 join 方 法 缓存 起 来 ， 避 人 免 每 次 都 重 
复 创 建 与 寻找 方法 。 





var repeat = (function() { 
var join = Array.prototype.join, obj = {}; 
return function(target, n) { 
obj.length =n + 1; 
return join.call(obj, target); 





版 本 4: WE ae, TE oN, EWR 
们 将 ruby 重 复 5 次 ， 其 实 我 们 在 第 二 次 已 得 到 
rubyruby， 那 么 第 3 次 直接 用 rubyruby 进 行 操 作 ， 而 
不 是 用 ruby。 


function repeat(target, n) { 
var s = target, total = []; 
while (n > 0) { 
if (n % 2 == 1) 
total[total.length] = s;// 如 果 是 奇数 
if (n == 1) 
break; 
S += S; 
n =n >> 1;// 相 当 于 将 n 除 以 2 取 其 商 , 或 说 开 2 二 次 方 


return total.join(''); 





版 本 5: 版 本 4 的 变种 ， 免 去 创建 数组 与 使 用 
jion 方 法 。 它 的 短处 在 于 它 在 循环 中 创建 的 字符 串 
比 要 求 的 还 长 ， 需 要 回 减 一 下 。 





function repeat(target, n) { 
var s = target, c = s.length * n 


} mia ke (n = =n >> 1); 


s = s.substring(0, c); 
return s; 





版 本 6: 版 本 4 的 改良 版 。 


function repeat(target, n) { 
var s = target, total = ""; 
while (n > 0) { 
if (n % 2 == 1) 


return total; 





版 本 7: 与 版 本 6 相近 。 不 过 在 浏览 器 下 递归 好 


像 都 做 了 优化 〈 包 括 耻 6) ， 与 其 他 版 本 相 比 ， 属 
于 上 乘 方案 之 一 。 


function repeat(target, n) { 
if (n == 1) { 
return target; 


} 

var s = repeat(target, Math.floor(n / 2)); 
S += S} 

if (n% 2) { 


s += target; 
} 


return s; 





版 本 8: 可 以 说 是 一 个 有 反例， 很 慢 ， 不 过 实际 
上 它 还 是 可 行 的 ， 因 为 实际 上 没有 人 将 n 设 成 上 百 
成 干 。 
function repeat(target, n) { 


return (n <= 0) ? "" : target.concat(repeat(target, 


} 





经 测试 ， 版 本 6 在 各 浏览 右 的 得 分 是 最 高 的 。 


2.1.2 byteLen 





byteLen 方 法 : WGN MAC BTA INT 
度 。 这 是 一 个 后 端 过 来 的 方法 ， 如 果 将 一 个 喘 文 字 
从 插入 数据 库 char、varchar、text 类 型 的 字段 时 占用 
一 个 字 节 ， 而 将 一 个 中 文字 符 插 入 时 占用 两 个 字 
节 。 为 了 避免 插入 浇 出 ， 束 需要 事先 判断 字符 串 的 
字 节 长 度 。 在 前 端 ， 如 果 我 们 要 用 户 填 写 文 本 ， 限 
制 字 节 上 的 长 短 ， 比 如 发 短信 ， 也 要 用 到 此 方法 。 
随 着 浏览 器 普及 对 二 进 制 的 操作 ， 该 方法 也 越 来 越 
常用 。 





版 本 1: 假设 当 字 符 串 每 个 字符 的 Unicode 编 码 
均 小 于 或 等 于 255 时 ，byteLength 为 字符 串 长 度 ， 再 
通 历 字 符 串 ， 遇 到 Unicode 编 码 大 于 255 时 ， 为 
byteLength 补 加 1。 








function byteLen(target) { 
var byteLength = target.length, i = 0; 
for (; i < target.length; i++) { 
if (target.charCodeAt(i) > 255) { 
byteLength++; 
} 


} 
return byteLength; 


po 


版 本 2: 使 用 正则 表达 式 ， 并 支持 设置 汉字 的 
存储 字 节 数 。 比 如 用 mysgl 存 储 汉 字 时 ， 是 3 个 字 市 
BL 








function byteLen(target, fix) { 
TIX- = PLEX, 2 oes 
var str = new Array(fix + 1).join("-") 
return target.replace(/[4\x00-\xff]/g, str).length; 


J 





版 本 3: 来 目 腾 讯 的 解决 方案 。 腾 讯 通过 多 子 
域名 +postMessage+manifest 离 线 proxy 页 面 的 方式 扩 
大 localStorage 的 存储 空间 。 在 这 个 过 程 中 ， 我 们 需 
要 知道 用 户 已 经 保存 了 多 少 内 容 ， 因 此 吏 必 须 编写 
一 个 严谨 的 byteLen 方 法 。 





JEX 


* http://www.alloyteam.com/2013/12/js-calculate-the-number-of- 
bytes-occupied-by-a-string/ 
* 计算 字符 串 所 占 的 内 存 字 节 数 ， 默 认 使 用 UTF-8 的 编码 方式 计算 ， 也 可 制定 为 UTF - 


* UTF-8 是 一 种 可 变 长 度 的 Unicode 编码 格式 ， 使 用 1 一 4 个 字 节 为 每 个 字符 编码 
























































* 000000 - 00007F(128 个 代码 ) Ozzzzzzz(00-7F) 
1 个 字 节 


* 000080 - 0007FF(1920 个 代码 ) 110yyyyy(CO-DF) 10zzzzzz(80-BF 
2 个 字 节 
* 000800 - OOD7FF 
00E000 - 00FFFF(61440 个 代码 )  1110xxxx(EO-EF) 10yyyyyy 10zzz 
ZZZ 3 个 字 节 
* 010000 - 10FFFF(1048576 个 代码 ) 1111Qwww(FO-F7) 10xxxxxx 10yyy 


UN Po oe 


yyy 10zzzzzz 47,4 
* 





* YE: Unicode 在 范围 D890-DFFF 中 不 存在 任何 字符 

* {@link <a onclick="javascript:pageTracker. trackPageview('/o 
utgoing/zh.wikipedia. org/wiki/UTF-8');" 

* href="http://zh.wikipedia.org/wiki/UTF-8">http://zh.wikipedi 
a.org/wiki/UTF -8</a>} 


UTF-16 大 部 分 使 用 2 个 字 节 编码 ， 编 码 超出 65535 的 使 用 4 个 字 节 
000000 - OOFFFF 2 个 字 节 
010000 - 10FFFF 4 个 字 节 


+ + + + 光 


* {@link <a onclick="javascript:pageTracker. trackPageview( '/o 
utgoing/zh.wikipedia. org/wiki/UTF-16');" 

* href="http://zh.wikipedia. org/wiki/UTF-16">http://zh.wikiped 
1a.org/wiki/UTF-16</a>} 

* @param {String} str 

* @param {String} charset utf-8, utf-16 

* @return {Number} 

yh 
function byteLen(str, charset){ 

var total = 0, 


charCode, 

i, 

len; 
charset = charset ? charset.toLowerCase() : ''; 
if(charset === 'utf-16' || charset === 'utf16'){ 


for(i = ©, len = str.length; i < len; i++){ 
charCode = str.charCodeAt(1); 
if(charCode <= Oxffff){ 
total += 2; 
selse{ 
total += 4; 
} 


} 
telse{ 
for(i = ©, len = str.length; i < len; i++){ 
charCode = str.charCodeAt(1); 
if(charCode <= 0x007f) { 


total += 1; 
selse if(charCode <= 0x07ff){ 


total += 2; 

selse if(charCode <= Oxffff){ 
total += 3; 

yelse{ 
total += 4; 


J 
} 


} 


return total; 








truncate 方 法 : 用 于 对 字符 串 进行 截断 处 理 。 
当 超 过 限定 长 度 ， 默 认 添 加 3 个 点 号 。 


function truncate(target, length, truncation) { 
length = length || 30; 
truncation = truncation === void(0) ? '...' : truncation; 
return target.length > length ? 
target.slice(0, length - truncation.length) + trunc 
ation : String(target); 


} 





camelize 方 法 : 转换 为 驼峰 风格 。 





function camelize(target) { 
if (target.indexof('-') < 0 && target.indexOf('_') < 0) { 


return target;// 提 前 判断 ， 提 高 getStyle 等 的 效率 

} 

return target.replace(/[-_][4-_]/g, function(match) { 
return match.charAt(1).toUpperCase(); 

}); 


ee 


underscored J YE : 转换 为 下 划 线 风格 。 


function underscored(target) { 
return target.replace(/([a-z\d])([A-Z])/g, '$1_$2'). 
replace(/\-/g, '_').toLowerCase()j; 








dasherize 方 法 : 转换 为 连 字 符 风 格 ， 即 CSS 变 
量 的 风格 。 





function dasherize(target) { 
return underscored(target).replace(/_/g, '-'); 





capitalize 方 法 : 首 字 母 大 与 。 


function capitalize(target) { 
return target.charAt(0).toUpperCase() + target.substring(1) 
. toLowerCase(); 


} 








stripTags 方法 : 移 除 字 人 符 串 中 的 html 标 俭 。 


比如 ， 我 们 需要 实现 一 个 HTMLParser， 这 时 束 要 
处 理 option 元 素 的 innerText 问 题 。 此 元 素 的 内 部 只 
能 接受 文本 节点 ， 如 果 用 户 在 里 面 添 加 了 span、 
strong 等 标签 ， 我 们 就 需要 用 此 方法 将 这 些 标签 移 
除 。 在 Prototype.js 中 ， 它 与 strip、stripScripts 是 一 组 
ee 





var rtag = /<\w+(\s+("[^"]*"|' [人 "1]* | [^>])+)?>|<\/\w+>/gi 
function stripTags(target) { 
return String(target || "").replace(rtag, ''); 


} 








stripScripts 方法 : 移 除 字符 串 中 所 有 的 script 
标签 。 弥 补 stripTags 方 法 的 缺陷 。 此 方法 应 在 
stripTags 之 前 调用 。 


function stripScripts(target) { 
return String(target || "").replace(/<script[4>]*>([\S\s]*? 
)<\/script>/img, '') 





escapeHTML 方法 : 将 字符 串 经 过 html 转 义 得 








到 适合 在 页 面 中 显示 的 内 容 ， 如 将 “< BRN EL; 
”。 此 方法 用 于 防止 XSS 攻 击 。 


function escapeHTML(target) { 

return target.replace(/&/g, '&amp;') 
.replace(/</g, ‘'&lt;') 
.replace(/>/g, ‘&gt;') 


.replace(/"/g, "&quot;") 
.replace(/'/g, "&#39;"); 





unescapeHTML 方法 : 将 字符 串 中 的 html 实 体 
字符 还 原 为 对 应 字符 。 





function unescapeHTML(target) { 
return String(target ) 
.replace(/&#39;/g, '\'') 
.replace(/&quot;/g, '"' 
.replace(/&lt;/g, '<' 


.replace(/&gt;/g, '>' 
.replace(/&amp;/g, '&' 





注意 一 下 escapeHTML 和 unescapeHTML 这 两 个 
方法 ， 它 们 不 但 在 replace 的 参数 是 反 过 来 的 ， 
replace 的 顺序 也 是 反 过 来 的 。 它 们 在 做 html parser 








非常 有 用 的 。 但 涉及 浏览 器 ， 兼 容 性 问题 就 一 定 会 
TE: 


在 citojs 这 个 库 中 ， 有 一 个 类 似 于 escapeHTML 
的 方法 叫 escapeContent， 它 是 这 样 写 的 。 


function escapeContent(value) { 
value = '' + value; 
if (isWebKit) { 
helperDiv.innerText = value; 
value = helperDiv.innerHTML; 
} else if (isFirefox) { 
value = value.split('&').join('&amp;').split('<').j 
oin('&lt;').split('>'). join('&gt;'); 


} else { 
value = value.replace(/&/g, '&amp;').replace(/</g, 
'@lt;').replace(/>/g, '&gt;'); 
} 


return value; 








看 情况 是 处 理 &amp; 时 出 了 分 歧 。 但 它们 这 么 
做 其 实 也 不 能 处 理 所 有 html 实 体 。 因 此 Prototype.js 
是 建议 使 用 原生 API innerHTML , innerText 来 处 
FH 


var div = document.createElement('div' ) 


var escapeHTML = function (a) { 
div.data=a 
return div.innerHTML 


} 


var unescapeHTML = function (a) { 
div.innerHTML = a 
return getText(div)// 相 当 于 ijnnerText, textContent 


} 
function getText(node) { 
if (node.nodeType !== 1) { 
return node.nodeValue 
} else if (node.nodeName !== 'SCRIPT') { 
var ret = '' 


for (var i = 0, el; el = node.childNodes[i++]; ) { 
ret += getText(el) 


} 
} else { 
return '' 


J 








但 这 样 一 来 ， 它 们 就 不 能 运行 于 Node.js 环 境 
中 ， 并 且 性 能 也 不 好 ， 于 是 人 们 发 展 出 下 面 这 些 
库 。 


https://github.com/mathiasbynens/he 
https://github.com/mdevils/node-html-entities 








escapeRegExp 方 法 : 将 字符 串 安 全 格式 化 为 


TEM AIA TURN o 


function escapeRegExp(target) { 
return target.replace(/([-.*+?°${}()| [\J\Z\\])Zg, '\\$1'); 





2.1.3 pad 


pad 方 法 : 与 trim 方 法 相反 ，pad 可 以 为 字符 
串 的 某 一 并 添加 字符 串 。 和 常见 的 用 法 如 日 历 在 月 份 
前 补 零 ， 因 此 也 被 称 之 为 fllZero。 笔 者 在 博客 上 收 
集 许 多 版 本 的 实现 ， 在 这 里 转换 为 静态 方法 一 并 与 
出 。 








版 本 1: 数组 法 ， 创 建 数 组 来 放置 填充 物 ， 然 
后 再 在 右边 起 截取 。 


function pad(target, n) { 
var zero = new Array(n).join('0'); 
var str = zero + target; 
var result = str.substr(-n); 


return result; 





版 本 2: 版 本 1 的 变种 。 


function pad(target, n) { 
return Array((n + 1) - target.toString().split('').length). 
join('®') + target; 


} 





版 本 3: 二 进 制 法 。 前 半 部 分 是 创建 一 个 全 有 n 
个 零 的 大 数 ， 如 (1<<5) toString (2) ， 生 成 
100000, (1<<8) .toString (2) 生成 100000000， 
然后 再 截 短 。 


function pad(target, n) { 
return (Math.pow(10, n) + "" + target).slice(-n); 


} 





版 本 4: Math.pow 法 ， 思 路 同 版 本 3。 


function pad(target, n) { 
return ((1 << n).toString(2) + target).slice(-n); 
} 





版 本 5: toFixed 法 ， 思 路 与 版 本 3 差不多 ， 创 建 


一 个 拥有 n 个 零 的 小 数 ， 然 后 再 截 短 。 


function pad(target, n) { 
return (0..toFixed(n) + target).slice(-n); 


} 





版 本 6: 创建 一 个 超大 数 ， 在 常规 情况 下 是 截 
不 完 的 。 
function pad(target, n) { 


return (1e20 + "" + target).slice(-n); 


J 








版 本 7: 质朴 长 存 法 ， 就 是 先 求 得 长 度 ， 然 后 
一 个 个 地 往 无 边 补 零 ， 加 到 长 度 为 n 为 止 。 





function pad(target, n) { 
var len = target.toString().length; 
while (len < n) { 
target = "0" + target; 
len++; 


i; 


return target; 


} 








版 本 8: 也 就 是 现在 mass Framework 使 用 的 版 
本 ， 支 持 更 多 的 参数 ， 人 允许 从 左 或 从 石 填充 ， 以 及 
使 用 什么 内 容 进 行 填充 。 


function paottarget, n, filling, right, radix) { 
var num = target. toString(radix || 10); 
filling = filling || "0"; 
while (num.length < n) { 
if (!right) { 


num = filling + num; 
} else { 
num += filling; 


} 


return num; 








在 ECMA262V7 规 范 中 ，pad 方 法 也 有 了 对 应 的 
代替 品 一 一 padStart ， 此 外 ， 还 有 从 后 面 补 零 的 方 
法 一 padEnd 。 


https://github.com/es-shims/es7-shim 


wbr 方 法 : 为 目标 字符 串 深 加 wbr 软 换行 。 不 
过 需要 注意 的 是 ， 它 并 不 是 在 每 个 字符 之 后 都 插 




















入 <wbr> 字样 ， 而 是 相当 于 在 组 成 文本 市 点 的 部 分 
中 的 每 个 字符 后 插入 <wbr> 字样 。 例 如 ，aa<span> 


bb</span>cc ， 退 回 a<wbr>a<wbr> 





<span>b<wbr>b<wbr></span>c<wbr>c<wbr> > 
外 ， 在 Opera 下 ， 浏 览 器 默认 css 不 会 为 wbr 加 上 样 
式 ， 导 致 没有 换行 效果 ， 可 以 在 css 中 加 上 wbr 


: after { content: "\oo0200B" } 解决 此 问题 。 


function wbr(target) { 
return String(target ) 
.replace(/(?:<[4>]+>) | (?:&#?[0-9a-z2]{2,6};)|(.{1})/ 
gi, '$&<wbr>') 


.replace(/><wbr>/g, '>'); 


} 





format 方 法 : 在 C 语 言 中 ， 有 一 个 叫 printf 的 方 
法 ， 我 们 可 以 在 后 面 添加 不 同类 型 的 参数 般 入 到 将 
要 输出 的 字符 串 中 。 这 是 非 剃 有 用 的 方法 ， 因 为 
JavaScript 涉 及 大 量 的 字符 串 拼 接 工 作 。 如 果 涉 及 过 
辑 ， 我 们 可 以 用 模板 ， 如 果 轻 量 点 ， 我 们 可 以 用 这 
个 方法 。 它 在 不 同 框架 中 名 字 古 不 同 的 ， 





Prototype.js"4interpolate; Base2 叫 format ; 


mootools HH substitute 。 


function format(str, object) { 
var array = Array.prototype.slice.call(arguments, 1); 
return str.replace(/\\?\#{([4{}]+)\}/gm, function(match, na 


me) { 


if (match.charAt(0) == '\\') 
return match.slice(1); 

var index = Number (name) 

if (index >= 0) 


return array[index]; 
if (object && object[name] !== void 0) 
return object[name]; 


return ; 








format T ALE PAPEETE, WRF a W 
占 位 符 为 0(、1、2 这 样 的 非 零 整数 形式 ， 要 求 传 入 
两 个 或 两 个 以 上 的 参数 ， 人 否则 就 传 入 一 个 对 象 ， 键 
AN AMIT. 








var a = format("Result is #{0},#{1}", 22, 33); 
alert(a);//"Result is 22,33" 
var b = format("#{name} is a #{sex}", { 

name: "Jhon", 

sex: "man" 


}); 


alert(b);//"Jhon is a man" 


PT 
2.1.4 quote 





quote 方法 : FES AB AMIS Ss, AJR 
内 部 需要 转 义 的 地 方 都 要 转 义 ， 用 于 接 装 JSON 的 
键 名 或 模板 系统 中 。 


版 本 1: 来 自 JSON3。 





//avalon2 
//https://github.com/bestiejs/json3/blob/master/lib/json3.js 
var Escapes = { 


ga UNUE 
Sd AIG 
Be TYG", 

7 
10: "\\n", 
13: "\\r", 
TN 


} 


// Internal: Converts 'value' into a zero-padded string such th 
at its 

// length is at least equal to 'width'. The 'width' must be <= 
6. 

var leadingZeroes = "000000" 

var toPaddedString = function (width, value) { 


// The '|| O' expression is necessary to work around a bug 
in 
// Opera <= 7.54u2 where 'O == -0', but 'String(-0) !== "oO" 
return (leadingZeroes + (value || 0)).slice(-width) 
ti 


var unicodePrefix = "\\u00" 


var escapeChar = function (character) { 

var charCode = character.charCodeAt(0), escaped = Escapes[c 
harCode ] 

if (escaped) { 

return escaped 

} 

return unicodePrefix + toPaddedString(2, charCode.toString( 
16) ) 
var reEscape = /[\x00-\x1f\x22\x5c]/g 
function quote(value) { 

reEscape.lastIndex = 0 


return '"' + ( reEscape.test(value)? String(value) ,replace 人 
reEscape, escapeChar) : value ) + '"' 

} 

avalon.quote = typeof JSON !== 'undefined' ? JSON.stringify : q 
uote 





版 本 2: 来 目 百 度 的 etpl 模 极 库 。 


//https://github.com/ecomfe/etpl/blob/2.1.0/src/main.js#L207 
function stringLiteralize(source) { 
return '"''! 
+ source 
.replace(/\x5C/g, '\\\\') 
.replace(/"/g, '\\"') 
.replace(/\x0A/g, '\\n') 


.replace(/\x09/g, '\\t') 
.replace(/\xO@D/g, '\\r') 


Tue? a 
+ 了 





当然 ， 如 采 浏 览 右 已 经 文 持 原生 JSON， 我 们 


直接 用 JSON.stringify 就 行 了 。 男 外 ，FF 在 JSON 发 
HAZ, LSC F¥FString.prototype.quote-¥ String.quote 
Frizz, BEANIE EA quote Ai TE 22 Fl FE WM hase E 
置 这 些 方 法 。 





接 下 来 ， 我 们 来 修复 字符 串 的 一 些 bug。 字 符 
串 相对 其 他 基础 类 型 ， 没 有 太 多 bug， 主 要 是 3 个 问 


(1) IE6、 正 7 不 文 持 用 数组 中 括号 取 它 的 每 
一 个 字符 ， 需 要 用 charAt 来 取 。 





(2) IE6、IE7、 正 8 不 文 持 垂直 分 表 符 ， 于 是 
WEAE J var isIE678= !+"\vi" 这 个 伟大 的 判定 
hack. 


(3) IEX T Á AY Fe fie By EL fit Dan aS NPE, 
因此 实现 trim 方 法 会 有 一 些 不 同 。 





前 两 个 问题 只 能 回避 ， 我 们 重点 研究 第 3 个 问 
题 ， 也 就 是 如 何 实 现 trim 方 法 。 由 于 太 常 用 ， 所 以 
相应 的 实现 也 非常 多 。 我 们 可 以 一 起 看 看 ， 顺 便 学 
习 一 下 正则 。 





2.15 trim 与 空 日 





版 本 1: 虽然 看 起 来 不 怎么 样 ， 但 是 动用 了 两 
次 正则 蔡 换 ， 实 际 速度 非 党 惊人 ， 这 主要 得 益 于 浏 
唤 右 的 内 部 优化 。base2 类 库 使 用 这 种 实现 。 在 
Chrome 刚 出 来 的 年 代 ， 这 实现 是 异常 快 的 ， 但 
chrome 对 字符 串 方 法 的 疾 狂 优化 ， 引 起 了 其 他 浏览 
器 的 跟风 。 于 是 正则 的 实现 再 也 比 不 了 字符 串 方 法 
了 。 一 个 著名 的 字符 串 拼接 例子 ， 和 直接 相 加 比 用 
Array 做 成 的 StringBuffer 还 快 ， 而 StringBuffer 技 术 
在 早 些 年 备 受 推介 | 














function trim(str) { 
return str.replace(/‘\s\s*/, '').replace(/\s\s*$/, ''); 


[L SCR 


版 本 2: 和 版 本 1 很 相似 ， 但 稍 慢 一 点 ， 主 要 原 
因 是 它 最 先是 假设 至 少 存在 一 个 空白 符 。 
Prototype.js 使 用 这 种 实现 ， 不 过 其 名 字 为 strip， 
为 Prototype 的 方法 都 是 力求 与 Ruby 同 名 。 








<div class="se-preview-section-delimiter"></div> 


«javascript 
function trim(str) { 


return str.replace(/4\s+/, '').replace(/\st$/, ''); 


} 





版 本 3: 截取 方式 取得 空白 部 分 (当然 允许 中 
间 存 在 空白 符 ) ， 总 共 调 用 了 4 个 原生 方法 。 设 计 
非常 巧妙 ，substring 以 两 个 数字 作为 参数 。 
Math.max 以 两 个 数字 作 参 数 ，search 则 返回 一 个 数 
字 。 速 度 比 上 面 两 个 慢 一 点 ， 但 基本 比 10 之 前 的 版 
本 快 ! 











function trim(str) { 
return str.substring(Math.max(str.search(/\S/), 0), 
str.search(/\S\s*$/) + 1); 


} 


po 


版 本 4: 这 个 可 以 称 得 上 版 本 2 的 简化 版 ， 吏 是 
利用 候选 操作 符 连 接 两 个 正则 。 但 这 样 做 就 失去 了 
浏览 右 优 化 的 机 会 ， 比 不 上 版 本 3。 由 于 看 来 很 优 
ME, FZR AEH 它 ， 如 jQuery 与 Mootools。 





function trim (str) { 
return str.replace(/4\s+|\s+$/g, ''); 


} 


版 本 5: match 如 果 能 匹配 到 东西 会 返回 一 个 
类 数组 对 象 ， 原 字符 匹配 部 分 与 分 组 将 成 为 它 的 元 
素 。 为 了 防止 字符 串 中 间 的 空 昌 人 符 被 排除 ， 我 们 需 
ee eee (?:exp) 。 由 于 数组 可 能 大 

， 我 们 在 后 面 还 要 做 进一步 的 判定 。 好 像 浏览 器 
ey 一 个 字 慢 。 所 以 不 要 迷信 
正则 ， 虽 然 它 基本 上 有 是 万 能 的 。 











function Corn St) { 
str = str.match(/\S+(?: Soper) /); 
return str ? str[O] : ''; 


re 
版 本 6: 把 符合 要 求 的 部 分 提供 出 来 ， 放 到 一 
站 空 字符 串 中 。 不 过 效率 很 差 ， 尤 其 是 在 IE6 中 。 





function trim(str) { 


return str.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1'); 
} 








版 本 7: 与 版 本 6 很 相似 ， 但 用 了 非 捕 获 分 组 进 
行 了 优点 ， 性 能 较 之 有 一 后 扩 提 升 。 
function trim(str) { 


return str.replace(/^\s*(\S*(?:\s+t\S+)*)\s*$/, '$1'); 
} 





版 本 8: 沿 大 上面 两 个 的 思路 进行 改进 ， 动 用 
SARA SS FASE, WME oo", BOR 
非 钊 悚 人 。 无 其 在 IE6 中 ， 可 以 用 疯狂 来 形容 这 次 
性 能 的 提升 ， 直 接 秒 杀 FF3。 


function trim(str) { 


return str.replace(/4\s*((?:[\S\s]*\S)?)\s*$/, '$1'); 
} 





版 本 9: TCU Re FA Pi Pes VL iC T E ER ROD H 
在 火狐 中 得 到 改善 ， 正 没有 上 次 那么 疯狂 。 
function trim(str) { 


return str.replace(/4\s*([\S\s]*?)\s*$/, '$1'); 
} 





版 本 10: 笔者 只 想 说 ， 搞 出 这 个 的 人 已 经 不 能 
用 万 害 来 形容 ， 而 是 专家 级 别 了 。 它 先是 把 可 能 的 





空白 和 从 全 部 列 出 来 ， 在 第 一 次 过 历 中 砍 挥 前 面 的 空 
日 ， 第 二 次 砍 抒 后 面 的 空白 。 全 过 程 只 用 了 indexOf 
与 substring 这 个 专门 为 处 理 字 符 串 而 生 的 原生 方 

A, BATA SEM. MERGER A, fit EEN 
部 的 和 二进制 实现 ， 并 且 在 下 与 火狐 《其 他 浏览 颖 当 
然 也 坚 无 疑问 ) Aha RUIZ, TERE Ah Ee 
级 别 的 ，PHP.js 就 收纳 了 这 个 方法 。 


Function trim(str) { 





var whitespace = ' \n\r\t\f\x0b\xa0\u2000\uU2001\U2002\uU2003\n\ 
\u2004\uU2005\u2006\U2007 \U2008 \U2009 \U200a\U200b\U2028\uU2029\ 

u3000'; 

for (var I = 0; I < str.length; I++) { 


if (whitespace. indexOf(str.charAt(i)) === -1) { 
str = str.substring(i); 
break; 

} 
for (I = str.length - 1; I >= 0; I--) { 

if (whitespace.indexOf(str.charAt(i)) === -1) { 
str = str.substring(0, I + 1); 
break; 

} 
} 
return whitespace.indexOf(str.charAt(0)) === -1 ? str: “7; 
} 





版 本 11: 实现 10 的 字数 压缩 版 ， 前 面部 分 的 衬 
日 由 正则 奉 换 负 员 砍 控 ， 后面 用 原生 方法 处 理 ， 效 
RAED RR, (AEE BAR BEX 








Function trim(str) { 

str = str.replace(/‘\st+/, ''); 

for (var I = str.length - 1; I >= 0; I--) { 
if (/\S/.test(str.charAt(i))) { 

str = str.substring(0, I + 1); 

break; 


} 


} 


return str; 


} 








版 本 12: 版 本 10 更 好 的 改进 版 ,注意 说 的 不 是 
性 能 速度 ， 而 是 易 记 与 使 用 方面 。 


Function trim(str) { 

var m = str.length; 

for (var I = -1; str.charCodeAt(++I) <= 32; ) 

for (var j =m- 1; j > I && str.charCodeAt(j) <= 32; j--) 


return str.slice(I, j + 1); 


} 








但 这 还 没有 完 。 如 果 你 经 党 翻 看 jQuery 的 实 
现 ， 你 就 会 肥 现 jQuery1. A 多 出 了 
一 个 对 xA0 的 特别 处 理 。 这 是 Prototype.js 的 核心 成 
员 :kangax 的 发 现 ， 正 或 早期 的 标准 浏览 需 在 字符 串 
的 处 理 上 都 有 bug， 把 许多 本 属于 空白 的 字符 没有 
列 为 s，jQuery 在 1.42 中 也 不 过 把 常见 的 不 断 行 空白 
xA0 修 复 挥 ， 并 不 完整 ， 因 此 最 佳 方案 还 是 版 本 
10. 








// Make sure we trim BOM and NBSP 
var rtrim = /A[\S\UFEFF\xA0]+]| [\S\UFEFF\xA0]+$/g, 
jQuery.trim = function( text ) { 

return text == null ? 


( text + "" ).replace( rtrim, "" ); 


”| 

下 面 是 一 个 比较 星 涩 的 知识 点 一 一 空 日 字符 。 
根据 屈 慑 的 博文 中 ， 浏 览 器 会 把 WhiteSpace 和 
LineTerminator 都 列 入 空白 字符 。Ecma262 v5 文档 
规定 的 WhiteSpace， 如 表 2-1 所 示 。 








表 2-1 


Unicode 统 























EARI BEEZ 











"t", "\x09", "\u0009", <TAB> 制 表 符 ， 键 盘 tab 键 








" '"\u000B",<VT> 垂 直 制 表 符 


"Mu000C",<FF> 换 页 符 


"mu000D",<CR> 回 车 符 





", "U000A",<LF> 换 行 符 











U+00A0 "\xA0", "Nu00A0"<NBSP> 禁 止 自 动 换行 空格 符 











OGHAM SPACE MARK, kx H 25% 
Mongolian Vowel Separator， 蒙 古文 元 音 
EM QUAD 

EN SPACE，En 空 格 。 与 En 同 宽 (Em 的 1/2) 
EM SPACE，Em 空 格 。 与 Em 同 宽 
THREE-PER-EM SPACE，Em 1/3 空 格 




















FOUR-PER-EM SPACE，Em 1/4 空 格 

SIX-PER-EM SPACE，Em 1/6 空 格 

FIGURE SPACE， 数 字 空 格 。 与 单一 数字 同 宽 
PUNCTUATION SPACE， 标 点 空格 。 与 同 字体 罕 标 点 同 宽 
THIN SPACE， 罕 空格 。Em 1/6 或 /5 宽 
HAIR SPACE， 更 罕 空 格 。 比 罕 空 格 更 窜 
Zero Width Space, <ZWSP>, 2 ii 25% 




















U+200C Zero Width Non Joiner，<ZWNJ>， 零 宽 不 连 字 空格 


Zero Width Joiner, <ZWJ>, 

NARROW NO-BREAK SPACE， 窜 式 不 换行 空格 
<LS> 行 分 隔 符 
<PS> 段 落 分 隔 





符 


F 


U+205F 中 数学 空格 。 用 于 数学 方程 式 
U+2060 Word Joiner， 同 U+200B， 但 该 处 不 换行 。Unicode 3.2 新 增 ， 代 蔡 U+FEFF 
U+3000 IDEOGRAPHIC SPACE，<CJK>， 表 意 文 字 空 格 ， 即 全 角 空 格 


UpPR |Byte Order Mark，<BOM>， 字 节 次 序 标记 字符 。 不 换行 功能 于 Unicode 3.2 起 
废止 















































2.2 数组 的 扩展 与 修复 


得 益 于 Prototype.js 的 ruby 式 数组 方法 的 侵略 ， 
让 JserO 前 端 工 程 师 大 开 有 眼界 ， 原 来 对 数组 的 操作 也 
如 此 丰富 多 彩 。 原 来 JavaScript 的 数组 方法 就 是 基于 
栈 与 队列 的 那 一 套 ， 像 splice 还 是 很 晚 加 入 的 。 让 
我 们 回顾 一 下 它们 的 用 法 ， 如 图 2-4 所 示 。 








图 2-4 


。pop 方 法 : 出 栈 操作 ， 删 除 并 返回 数组 的 最 后 一 
个 元 系 。 
。push 方 法 : 入 栈 操作 ， 癌 数组 的 末尾 添加 一 个 





MES ug, FEIKE. 

shift 方 法 : 出 队 操 作 ， 删 除 并 返回 数组 的 第 一 个 
Fu: 

unshift 方 法 : 入 队 操 作 ， 辣 数组 的 开头 添加 一 个 
或 更 多 元 系 ， 并 返回 新 的 长 度 。 

slice 方 法 : 切片 操作 ， 从 数组 中 分 离 出 一 个 子 数 
组 ， 功 能 类 似 于 字符 串 的 。 





substring. slicefisubstr “= L538”, HATH 
换 关 数组 对 象 为 真正 的 数组 。 


。 Sort 方 法 :对 数组 的 元 素 进 行 排 序 ， 有 一 个 可 选 
参数 ， 为 比较 函数 。 

。reverse 方 法 : FUR BZA A R II - 

e splice TIA: 可 以 同时 用 于 原 数 组 的 增删 操作 ， 
数组 的 remove 方 法 就 是 基于 它 写 成 的 。 

。concat 方 法 : 用 于 把 原 数组 与 参数 合并 成 一 个 新 
数组 ， 如 果 参 数 为 数组 ， 那 么 它 会 把 其 第 一 维 














的 元 素 放 入 新 数组 中 。 因 此 我 们 可 以 利用 它 实 
现 数 组 的 平坦 化 操作 与 元 隆 操 作 。 

。join 方 法 : 把 数组 的 所 有 元 系 放 入 一 个 字符 串 ， 
TORR WA Fa FE OP BS EAT oP hs PRAY AR RR 
成 字符 串 split 的 反 操 作 。 

。indexOf 方 法 : 定位 操作 ， 返 回 数组 中 第 一 个 等 
于 给 定 参 数 的 元 素 的 索引 值 。 

。]lastITndexOf 方 法 : 定位 操作 ， 同 上 ， 不 过 是 从 后 
授 历 。 索 引 操 作 可 以 说 是 字符 串 同名 方法 的 翻 
版 ， 存 在 就 返回 非 负 整数 ， 不 存在 束 返 回 -1。 

。forEach 方 法 : ERIE, REEI RAKARE 
入 一 个 函数 中 执行 。Ptototype.js 中 对 应 的 名 字 为 
each 。 

。map 方 法 : 收集 操作 ， 将 数组 的 元 系 依 次 传 入 一 
个 函数 中 执行 ， 然 后 把 它们 的 返回 值 组 成 一 个 
新 数组 返回 。Ptototype.js 中 对 应 的 名 字 为 
collect. 


o filter 777K: IERIE, BUH TTA RIERA 








一 个 函数 中 执行 ， 然 后 把 返回 值 为 tue 的 那个 元 

素 放 入 新 数组 返回 。 在 Prototype.js 中 ， 它 有 3 个 

名 字 ， 即 select、filter 和 findAll。 

some 方 法 : 只 要 数组 中 有 一 个 元 素 满 足 条 件 

《 放 进 给 定 函 数 返 回 true) » ABATE Aik [Al 

true。 Ptototype.js 中 对 应 的 名 字 为 any。 

every 方 法 : 只 有 数组 中 所 有 元 素 都 满足 条 件 
《了 放 进 给 定 函 数 返 回 true) ， 它 才 返 回 true。 

Ptototype.js 中 对 应 的 名 字 为 all。 

reduce 方 法 : 归 化 操作 ， 将 数组 中 的 元 素 归 化 为 

一 个 简单 的 数值 。Ptototype.js 中 对 应 的 名 字 为 

inject. 

。reduceRight 方 法 : 归 化 操作 ， 同 上 ， 不 过 是 从 
后 过 历 。 


为 了 方便 大 家 记忆 ， 我 们 可 以 用 图 2-5 摘 情 数 
组 的 18 种 操作 。 





unshift push 
A Z 
[ ]> length 
shift O) pop 
(m) =—> indexOf 





(OQ) pipio mn 


forEach 


>d tO OXOXO ] 
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tooto1985 


18 kinds of methods to get to know a JavaScript array operations 


图 2-5 
由 于 许多 扩展 也 基于 这 些 新 的 标准 化 方法 ， 


此 笔者 先 给 出 IE6、IE7、IE8 的 兼容 方案 ， 全 部 在 
数组 原型 上 修复 它们 。 





[1, 2, , 4].forEach(function(e){ 
console. log(e) 





}); 
// 依 次 打印 出 1，2，4， 忽 略 第 2、 第 3 个 去 号 间 的 空 元 素 





reduce 与 reduceRight 是 一 组 ， 我 们 可 以 利用 
reduce 方 法 创建 reduceRight 方 法 。 


ap.reduce = function(fn, lastResult, scope) { 
if (this.length == 0) 
return lastResult; 
var i = lastResult !== undefined ? 0 : 1; 
var result = lastResult !== undefined ? lastResult : this[0 
]; 
for (var n = this.length; i < n; i++) 
result = fn.call(scope, result, this[i], i, this); 
return result; 


} 


ap.reduceRight = function(fn, lastResult, scope) { 
var array = this.concat().reverse(); 
return array.reduce(fn, lastResult, scope); 








接 下 来 ， 我 们 看 看 主流 库 为 数组 增加 了 哪些 打 
展 吧 。 


Prototype.js 的 数组 扩展 : eachSlice、detect、 
grep、include、inGroupsOf、invoke、max、min、 
partition, pluck. reject. sortBy. zip. size, clear, 
first. last. compact. flatten, without. uniq, 


intersect. clone. inspect. 


Rightjs 的 数组 扩展 : include. clean. clone, 
compact. empty. first. flatten. includes, last, 
max. merge, min, random, reject. shuffle. 


size. sortBy. sum, uniq», walk, without. 


mootools 的 数组 扩展 : clean. invoke, 
associate. link, contains. append. getLast, 
getRandom, include, combine, erase. empty. 


flatten. pick, hexToRgb. rgbToHex. 


EXT 的 数组 扩展 : contains. pluck, clean, 
unique. from. remove, include, clone, merge, 
intersect. difference. flatten, min, max, mean, 


Sum. erase, insert. 


Underscore.js 的 数组 扩展 : detect. reject, 
invoke、 pluck、sortBy、groupBy、 sortedIndex、 
first. last. compact. flatten, without. union, 


intersection, difference. uniq» Zip. 


qooxdoo 的 数组 扩展 : insertAfter. insertAt, 
insertBefore. max. min, remove, removeAll, 


removeAt, sum, unique. 


Tangram 的 数组 扩展 : contains. empty. find, 


remove, removeAt. unique. 





我 们 可 以 发 现 ，Prototype.js 那 一 套 方法 影响 深 
远 ， 许 多 库 都 有 它 的 影子 ， 全 面 而 细节 地 宫 括 了 各 
种 操作 ， 大 家 可 以 根据 自己 的 需要 与 框架 守则 制订 
自己 的 数组 扩展 。 笔 者 在 这 方面 的 考量 如 下 ， 至 少 
要 包含 平坦 化 、 去 重 、 乱 序 、 移 除 这 几 个 操作 ， 其 
次 是 两 个 集合 间 的 操作 ， 如 取 并 集 、 闫 集 、 交 集 。 

















下 面 是 各 种 具体 实现 。 


contains 方 法 : 判定 数组 是 否 包含 指定 目标 。 


function contains(target, item) { 
return target.indexOf(item) > -1 


} 


PO 


removeAt 方 法 ， 移 除数 组 中 指定 位 置 的 元 
素 ， 返 回 布尔 值 表示 成 功 与 否 。 


function removeAt(target, index) { 
return !!target.splice(index, 1).length 


} 





remove 方 法 : 移 除 数组 中 第 一 个 匹配 传 参 的 
那个 元 素 ， 返 回 布尔 值 表示 成 功 与 否 。 


function remove(target, item) { 
var index = target.indexOf(item); 
if (~index) 
return removeAt(target, index); 
return false; 


} 





shuffle 方法 : 对 数组 进行 洗 有 牌 。 若 不 想 影 响 
原 数 组 ， 可 以 先 复 制 一 份 出 来 操作 。 有 关 洗 牌 算 法 
的 介绍 ， 可 见 下 面 两 篇 博文 。 





«Fisher-Yates Shuffle) 


《数组 的 完全 随机 排列 》 


function shuffle(target) { 
var j, x, i = target.length; 
for (; i > 0; j = parseInt(Math.random() * i), 


x) { 
I 


x = target[--i], target[i] = target[j], target[j] = 


return target; 





random 方 法 : 从 数组 中 随机 抽 选 一 个 元 素 出 
来 。 


function random(target) { 
return target[Math.floor(Math.random() * target.length)]; 
} 








flatten 方 法 : 对 数组 进行 平坦 化 处 理 ， 返 回 一 
个 一 维 的 新 数组 。 





function flatten(target) { 
var result = []; 
target. forEach(function(item) { 
if (Array.isArray(item)) { 
result = result.concat(flatten(item) ); 
} else { 


result.push(item); 


} 


}); 


return result; 








unique 方 法 : 对 数组 进行 去 重 操作 ， 返 回 一 71 
ZA ERICA NII AH. 





function unique(target) { 
var result = []; 
loop: for (var i = 0, n = target.length; i < n; i++) { 
for (var x= i + 1; x < n; x++) { 
if (target[x] === target[i]) 
continue loop; 


} 
result.push(target[i]); 
} 


return result; 





compact 方 法 : 过 小 数组 中 的 null 与 
undefined， 但 不 影响 原 数 组 。 


function compact(target) { 
return target.filter(function(el) { 
return el != null; 


}); 








pluck 方 法 ， 取 得 对 象 数组 的 每 个 元 素 的 指定 
属性 ， 组 成 数组 返回 。 


function pluck(target, name) { 
var result = [], prop; 
target.forEach(function(item) { 
prop = item[name]; 
if (prop != null) 


result.push(prop); 
H; 


return result; 





groupBy 方 法 : 根据 指定 条 件 (如 回调 对 象 的 
东 个 属性 ) 进行 分 组 ， 构 成 对 象 返 回 。 


function groupBy(target, val) { 

var result = {}; 

var iterator = $.isFunction(val) ? val : function(obj) { 
return obj[val]; 

}; 

target.forEach(function(value, index) { 
var key = iterator(value, index); 
(result[key] || (result[key] = [])).push(value); 


}); 


return result; 





sortBy 方 法 : 根据 指定 条 件 进行 排序 ， 通 常用 


于 对 象 数 组 。 


function sortBy(target, fn, scope) { 
var array = target.map(function(item, index) { 
return { 
el: item, 
re: fn.call(scope, item, index) 


}; 
}).sort(function(left, right) { 


var a = left.re, b = right.re; 
returna<b? -1:a>b?1: 0; 


}); 


return pluck(array, 'el'); 





union 方 法 : 对 两 个 数组 取 并 集 。 


function union(target, array) { 
return unique(target.concat(array) ); 


} 





intersect 方 法 : 对 两 个 数组 取 交 集 。 


function intersect(target, array) { 
return target.filter(function(n) { 
return ~array.indexof(n); 


}); 





diff 方 法 : SPAS AERA AME) 。 


function diff(target, array) { 
var result = target.slice(); 
for (var i = 0; i < result.length; i++) { 
for (var j = 0; j < array.length; j++) { 
if (result[i] === array[j]) { 
result.splice(i, 1); 
ay 
break; 
} 
} 


return result; 





min 方 法 : 返回 数组 中 的 最 小 值 ， 用 于 数字 数 
组 。 


function min(target) { 
return Math.min.apply(0, target); 
} 





max 方 法 : 返回 数组 中 的 最 大 值 ， 用 于 数字 数 


组 。 


function max(target) { 
return Math.max.apply(0, target); 
} 


基本 上 就 这 么 多 了 ， 如 果 你 想 实现 sum 方 法 ， 
可 以 使 用 reduce 方 法 。 我 们 再 来 抹 平 Array 原 生 方 法 
在 各 浏览 左 的 差异 ， 一 个 是 IE6、 耻 7 下 unshift 不 返 
回 数组 长 上 度 的 问题 ， 一 个 splice 的 参数 问题 。unshift 
的 bug 很 容易 修复 ， 可 以 使 用 函数 劫持 方式 搞定 。 





if ([].unshift(1) !== 1) { 
var _unshift = Array.prototype.unshift; 
Array.prototype.unshift = function() { 
_unshift.apply(this, arguments); 


return this.length; // 返 回 新 数组 的 长 度 
} 
} 





splice 在 一 个 参数 的 情况 下 ，IE6、IE7、IE8 默 
认 第 二 个 参数 为 零 ， 其 他 浏览 器 为 数组 的 长 度 ， 当 
然 我 们 要 以 标准 浏览 器 为 准 ! 





下 面 是 最 简单 的 修复 方法 。 





if ([1, 2, 3].splice(1).length == 0) { 
// 如 果 是 IE6、IE7、IE8， 则 一 个 元 素 也 没有 删除 
var _splice = Array.prototype.splice; 








Array.prototype.splice = function(a) { 
if (arguments.length == 1) { 
return _splice.call(this, a, this.length) 
} else { 
return _splice.apply(this, arguments) 











下 面 是 不 利用 任何 原生 方法 的 修复 方法 。 





Array.prototype.splice = function(s, d) { 
var max = Math.max, min = Math.min, 


a = [], i = max(arguments.length - 2, 0), 
k = 0, 1 = this.length, e, n, v, X; 
s=s || 9; 
if (s < 0) { 
s += l; 
} 
s = max(min(s, 1), 0); 
d = max(min(isNumber(d) ? d : 1, 1 - s), 0); 
v=i - d; 
n=1l+ v; 


while (k < d) { 
e = this[s + k]; 


if (e !== void 0) { 
a[k] = e; 
} 
k += 1; 
} 
x =1l-s-d; 
if (v < 0) { 
k=s + i; 
while (x) { 
this[k] = this[k - v]; 
k += 1; 
x -= 1; 


this.length = n; 
} else if (v > 0) { 


k = 1; 


while (x) { 
this[n - k] = this[l - k]; 
k += 1; 
x -= 1; 

} 


for (k = 0; k < i; ++k) { 
this[s + k] = arguments[k + 2]; 
} 


return a; 





一 旦 有 了 splice 方 法 ， 我 们 也 可 以 目 行 实现 
pop、push、shift、unshift 方 法 ， 因 此 你 明白 为 什么 
这 几 个 方法 是 直接 修改 原 数 组 了 了 吧 ? 浏览 器 厂商 的 





思路 与 我 们 一 样 ， 大 概 也 是 用 splice 方 法 来 实现 它 
们 ! 





var ap = Array.prototype 
var _slice = sp.slice; 
ap.pop = function() { 
return this.splice(this.length - 1, 1)[0]; 


} 


ap.push = function() { 
this.splice.apply(this, 
[this.length, ©0].concat(_slice.call(arguments))); 
return this.length; 


J 


ap.shift = function() { 
return this.splice(0, 1)[0]; 
} 


ap.unshift = function() { 
this.splice.apply(this, 
[0, 0].concat(_slice.call(arguments))); 
return this.length; 





数组 的 空位 


上 面 是 一 个 forEach 例 子 的 演示 ， 实 质 上 我 们 通 





过 修复 原型 方法 的 手段 很 难 达 到 ecmascript 规 范 的 
效果 。 缘 故 在 于 数组 的 空位 ， 它 在 JavaScript 的 各 
个 版 本 中 都 不 一 致 。 


数组 的 空位 是 指数 组 的 菏 一 个 位 置 没 有 任何 
值 。 比 如 ，Array 构 造 函 数 返 回 的 数组 都 是 空位 。 


Array(3) // [, ,,] 


上 面 的 代码 中 ，Array(3) 返 回 一 个 具有 3 个 空位 
的 数组 。 


注意 ， 空 位 不 是 undefined， 而 是 一 个 位 置 的 值 
等 于 undefined， 但 依然 是 有 值 的 。 空 位 是 没有 任何 
值 ，in 运 算 符 可 以 说 明 这 一 点 。 


0 in [undefined, undefined, undefined] // true 
© in [, , ,] // false 


上 而 的 代码 说 明 ， 芝 一 个 数组 的 0 写 位 置 是 有 
值 的 ， 第 二 个 数组 的 0 号 位 置 是 没有 值 的 。 





ECMA262V5 对 空位 的 处 理 ， 已 经 很 不 一 致 
了 ， 大 多 数 情 况 下 会 忽略 空位 。 比 如 ，forEach()、 
filter()、every( 和 some() 都 会 跳 过 空位 ;map0 会 跳 
过 空位 ， 但 会 保留 这 个 值 ，join0 和 toStringO 会 将 空 
位 视 为 undefined， 而 undefined 和 null 会 被 处 理 成 空 
FAT AA 








.forEach((x,i) => log(i)); // 1 
'b'].filter(x => true) // ['a','b'] 
.every(x => x==='a') // true 
.some(x => x !== 'a') // false 
.map(x => 1) // [,1] 


[,'a',undefined,null].toString() // ",a,," 





ECMA262V6 则 是 明确 将 空位 转 为 undefined 。 
比如 ，Array.from 方 法 会 将 数组 的 空位 转 为 
undefined， 也 就 古 说 ， 这 个 方法 不 会 忽略 空位 。 


Array.from(['a',,'b']) // [ "a", undefined, "b" 





扩展 运算 符 (...) 也 会 将 空位 转 为 undefined。 


[...['a',,'b']] // [ "a", undefined, "b" 





copyWithin0) 会 连 空位 一 起 拷贝 。 


[,'a','b',,].copywithin(2,0) // [,"a",,"a"] 





HOR KEMIA IE r FN BA Ai E. o 


new Array(3).fill('a') // ["a","a","a"] 





for...of (824 th Si I TEAL 


let arr = [, ,]} 
for (let i of arr) { console.log(1); } 
// 1 


// 1 





上 面 的 代码 中 ， 数 组 arr 有 两 个 空位 ，for...of 并 
略 它们 。 如 果 改 成 map 方 法 遍历 ， 那 么 空位 
会 跳 过 的 。 


entries()、keys()、values()、findO 和 findIndex() 
会 将 空位 处 理 成 undefined。 





..L,'a'].entries()] // [[0, undefined], [1,"a"]] 
.[,'a'].keys()] // [0,1] 
..[L,'a'].values()] // [undefined, "a" ] 
,'a'].find(x => true) // undefined 


,'a'].findIndex(x => true) // 0 





由 于 空位 的 处 理 规则 非常 不 统一 ， 所 以 建议 避 
免 出 现 空位 。 








23 数值 的 扩展 与 修复 


数值 没有 什么 好 扩展 的 ， 而 且 JavaScript 的 数值 
精度 问题 未 修复 ， 要 修复 它们 可 不 是 一 两 行 代码 了 
事 。 先 看 扩展 ， 我 们 只 把 目光 集中 于 Prototype.js 与 
mootools íT J o 








Prototype.js$ 为 它 添 加 8 个 原型 方法 : Succ 是 加 
1; times 是 将 回调 重复 执行 指定 次 数 toPaddingString 
与 上 面 提 到 字符 串 扩展 方法 pad 作 用 一 样 ; 
toColorPart 是 转 十 六 进 制 ; abs、ceil、floor 和 abs 是 
从 Math 中 偷 来 的 。 





mootools 的 情况 limit 古 从 数值 限定 在 一 个 闭 
开间 中 ， 如 果 大 于 或 小 于 其 边界 ， 则 每 于 其 最 大 值 
或 最 小 值 ，times 与 Prototype.js 的 用 法 相似 ;round 
是 Math.round 的 增强 版 ， 添 加 了 精度 控制 ; 
toFloat、tomt 是 从 window 中 偷 来 的 ， 其 他 的 则 是 从 








Math 中 偷 来 的 。 


在 ES5_shim.js 库 中 ， 它 实现 了 ECMA262V5 提 
到 的 一 个 内 部 方法 toInteger。 


// http://es5.github.com/#x9.4 
// http://jsperf.com/to-integer 
var RU "g = function(n) { 
n = +n; 
if ie [== n) { // isNaN 
0; 


} ages, if (n !== 0 && n !== (1 / O) && n !== -(1 / O)) Hi 
n= (n> 0 || -1) * Math.floor(Math.abs(n)); 


return n; 





但 依 我 看 来 都 没什么 意义 ， 数 值 往 往来 和 目 用 户 
输入 ， 我 们 一 个 正则 就 能 判定 它 是 不 是 一 个 “ 数 ”。 
如 果 是 ， 则 直接 Number (n) ! 





基于 同样 的 理由 ，mass Frameworkk 对 数字 的 扩 
展 也 是 很 少 的 ，3 个 独立 的 扩展 。 





limit 方法 : 确保 数值 在 [Ln1，n2j」 闭 区 间 之 


内 ， 如 果 超 出 限界 ， 则 置换 为 离 它 最 近 的 最 大 值 或 
最 小 值 。 


function limit(target, n1, n2) { 
var a = [ni, n2].sort(); 
if (target a[0]) 


< 
target = a[0]; 
if (target > 


a[1]) 
target = a[1]; 
return target; 


} 








nearer 方 法 : 求 出 距离 指定 数值 最 近 的 那个 
数 。 


function nearer(target, ni, n2) { 
var diffi = Math.abs(target - n1), 
diff2 = Math.abs(target - n2); 
return diffi < diff2 ? n1 : n2 








Number 下 唯一 需要 修复 的 方法 是 toFixed， 它 
是 用 于 校正 精确 度 ， 最 后 的 数 会 做 四 舍 五 入 操作 ， 





但 在 一 些 浏 览 费 中 并 没有 这 样 干 。 想 简单 修复 的 可 
以 这 样 处 理 。 





if (0.9.toFixed(0) !== '1') { 
Number .prototype.toFixed = function(n) { 


var power = Math.pow(10, n); 
var fixed = (Math.round(this * power) / power).toString 


if (n == 0) 
return fixed; 
if (fixed. angen it: ') < 0) 
fixed += ',' 
var padding = n : 1 - (fixed.length - fixed.indexOf('.' 


for (var i = 0; i < padding; i++) 
fixed += '0'; 
return fixed; 





奶 求 完美 的 话 ， 还 存在 这 样 一 个 版 本 ， 把 里 面 
的 加 、 减 、 乘 、 除 都 重新 实现 了 一 





https://github.com/es-shims/es5- 


shim/blob/master/es5-shim.js 


toFixed 方 法 实现 得 如 此 艰难 其 实 也 不 能 怪 浏 览 
医 ， 计 算 机 所 理解 的 数字 与 我 们 是 不 一 样 的 。 众 所 
周知 ， 计 算 机 的 世界 是 二 进 制 ， 数 字 也 不 例外 。 为 
了 储存 更 复杂 的 结构 ， 需 要 用 到 更 高 维 的 进 制 。 而 

















HRA RET EREN. UATE REALE EE 
度 上 反映 了 现实 世界 ， 但 它 提 供 的 顶 多 只 是 一 
NASH”, Zot BATA Ae rE ne. EL, 
1 除 以 3， 然 后 再 乘 以 3， 最 后 得 到 的 值 竟 然 不 是 1 
10 个 0.1 相 加 也 不 等 于 1; 交换 相 加 的 几 个 数 的 顺 
序 ， 却 得 到 了 不 同 的 和 。JavaScript 不 能 免 俗 。 





.log(0.1 + 0.2) 

.log(Math.pow(2, 53) === Math.pow(2, 53) + 1) //true 
.log(Infinity > 100) //true 

.log( JSON. stringify(25001509088465005)) //25001509088465 


. Log(0.1000000000000000000000000001) //0.1 
. Log(0.100000000000000000000000001) //0.1 


.1og(0.1000000000000000000000000456) //0.1 

. 1og(®.09999999999999999999999) //0.1 

.log(1 / 3) //0.3333333333333333 

.log(23.53 + 5.88 + 17.64)// 47.05 

.log(23.53 + 17.64 + 5.88)// 47.050000000000004 








这 些 其 实 不 是 bug， 而 是 我 们 无 法 接受 这 事 
实 。 在 JavaScript 中 ， 数 值 有 3 种 保存 方式 。 


(1) 字符 串 形式 的 数值 内 容 。 








(2) IEEE 754 标 准 双 精度 浮 点 数 ， 它 最 多 文 
持 小 数 点 后 带 15 一 17 位 小 数 ， 由 于 存在 二 进 制 和 十 
进 制 的 转换 问题 ， 具 体 的 位 数 会 发 生变 化 。 


(3) 一 种 类 似 于 C 语 言 的 int 类 型 的 32 位 整数 ， 
它 由 4 个 8 bit 的 字 节 构成 ， 可 以 保存 较 小 的 整数 。 











当 JavaScript 遇 到 一 个 数值 时 ， 它 会 首先 答 试 按 
整数 来 处 理 该 数值 ， 如 果 行 得 通 ， 则 把 数值 保存 为 
31 bit 的 整数 ， 如 果 该 数值 不 能 视 为 整数 ， 或 超出 
31 bit 的 范围 ， 则 把 数值 保存 为 64 位 的 IEEE 754 浮 点 
数 。 





聪明 的 读者 一 定 想 到 了 这 样 一 个 问题 ， 什么 时 
{IIA SL AE AE MI BE BM oe RIAR MHRA E OR ET 
RA? 答案 是 : 当 它 们 的 值 变 得 非常 庞大 时 ， 或 者 
进入 1 和 0 之 间 时 ， 规 窍 官 息 的 整数 融会 变 成 捉 措 不 
定 的 双 精 度 浮 点 数 。 因 此 ， 我 们 需要 注意 以 下 数 
值 。 











首先 是 1 和 0; 其 次 是 最 大 的 Unicode 数 
值 1114111 (7 位 数字 ， 相 当 于 (/x41777777) ; 最 
大 的 RGB 颜色 值 16777215 (8 位 数字 ， 相 当 于 
#FFFFFF) ; 最 大 的 32 bit 整 数 是 147483647 (10 位 
数字 ， 即 Math.pow(2,31)-1``) ; 最 少 的 32 位 bit 整 
数 -2147483648 ， 因 为 JavaScript 内 部 会 以 整数 的 形 
式 保存 所 有 Unicode 值 和 RGB 颜色 再 次 
是 2147483647 ， 任 何 大 于 该 值 的 数据 将 保存 为 双 精 
度 格式 ; 最 大 的 浮 点 数 9007199254740992 (16 位 数 
字 ， 即 Math.pow (2,53) ) ， 因 为 输出 时 类 似 整 
数 ， 而 所 有 Date 对 象 〈 按 蝇 秒 计算 ) 都 小 于 该 值 ， 
因此 总 古 模拟 整数 的 格式 输出 ， 最 大 的 双 精 度数 
值 1.7976931348623157e+308 ， 超 出 这 个 范围 就 要 
算 作 无 穷 大 了 。 











因此 ， 我 们 就 看 出 缘由 了 ， 大 数 相 加 出 问题 是 
由 于 精度 的 不 足 ， 小 数 相 加 出 问题 是 进 制 转 算 时 产 
生 误 凑 。 第 一 个 好 理解 ， 第 二 个 ， 主 要 是 我 们 常用 








的 十 进 制 转换 为 二 进 制 时 ， 变 成 循环 小 数 及 无 理 数 
等 有 无 限 多 位 小 数 的 数 ， 计 算 机 要 用 有 限 位 数 的 浮 
扩 数 来 表示 是 无 法 实现 的 ， 只 能 从 东 一 位 进行 截 
短 。 而 且 ， 因 为 内 部 表示 是 二 进 制 ， 十 进 制 看 起 来 
是 能 除 尽 的 数 ， 往 往 在 二 进 制 是 循环 小 数 。 











比如 用 二 进 制 来 表示 十 进 制 的 0.1， 残 得 写成 2 
的 蜗 〈 因 为 小 于 1， 所 以 暴 是 负数 ) 相 加 的 形式 。 
右 一 直 持 续 下 去 ，0.1 残 成 了 
0.000110011001100110011... 这 种 循环 小 数 。 在 有 效 
数字 的 范围 内 进行 舍 入 ， 就 会 产生 误差 。 





综 上 ， 我 们 就 尽量 避免 小 数 操作 与 大 数 
操作 ， 或 者 转交 后 台 去 处 理 ， 实 在 避免 不 了 
就 引入 专业 的 库 来 处 理 。 





24 ”函数 的 扩展 与 修复 





ECMA262V5 对 函数 唯一 的 扩展 就 是 bind 函 
数 。 众 所 周知 ， 这 是 来 和 目 Prototype.j$S， 上 此外， 其 他 
重要 的 函数 都 来 目 Prototype.js。 





Prototype.js 的 函数 扩展 包括 以 下 几 种 方法 。 


e argumentNames: 取得 水 数 的 形 参 ， 以 字符 串 数 
组 形式 返回 。 未 来 的 Angular.js 也 是 通过 此 方法 
实现 函数 编译 与 DI (依赖 注入 ) 。 

bind: 支持 this， 并 预先 添加 更 多 参数 。 
bindAsEventListener: 如 bind 相 似 ， 但 强制 返回 
函数 的 第 一 个 参数 为 事件 对 象 ， 这 是 用 于 修复 
IE 的 多 投 事件 API 与 标准 API 的 差异 。 

curry: 水 数 何 里 化 ， 用 于 一 个 操作 分 成 多 步 进 
行 ， 并 可 以 改变 原 函 数 的 行为 。 

e wrap: AOP 的 实现 。 


e delay: setTimeout 的 “偷懒 ”写法 。 

。 defer: 强制 延迟 0.01s 才 执行 原 函 数 。 

e methodize: 将 一 个 函数 变 成 其 调用 对 象 的 方 
法 ， 这 也 是 为 其 类 工厂 的 方法 链 服务 。 





这 些 方法 每 一 个 都 是 别 具 匠 心 ， 影 啊 深 远 。 


我 们 先 看 bind 方 法 ， 它 用 到 了 著名 的 朵 包 。 所 
请 团 包 ， 丈 古 一 个 引用 看 外 部 变量 的 内 部 函数 。 比 
GHP THR EIRAS o 


var observable = function(val) { 
var cur = val;// 一 个 内 部 变量 
function field(neo) { 
if (arguments.length) {//setter 
if (cur !== neo) { 





cur = neo; 


} 
} else {//getter 
return cur; 


} 


} 
field(); 
return field; 





上 上 面 代 码 里 面 的 field 函 数 将 与 外 部 的 cur 构 成 一 


个 财 包 。Prototype.js 中 的 bind 方 法 只 要 依仗 原 函 数 
与 经 过 切片 化 的 args 构 成 团 包 ， 而 让 这 方法 名 符 其 
实 的 是 curry， 用 户 最 初 的 传 参 ， 劫 持 到 返回 函数 修 
正 this 的 指向 。 





Function.prototype.bind = function(context) { 
if (arguments.length < 2 && context == void 0) 
return this; 
var _ method = this, args = [].slice.call(arguments, 1); 
return function() { 
return __method.apply(context, args.concat.apply(args, 


arguments) ); 


} 





正 因 为 有 这 东西 ， 我 们 才 方 便 修复 下 多 投 事件 
API 和 attachEvent 回 调 中 的 this 问 题 ， 它 总 是 指 加 
window 对 象 ， 而 标准 浏览 器 的 addEventListener 中 的 
this 则 为 其 调用 对 象 。 











var addEvent = document.addEventListener ? 


function(el, type, fn, capture) { 
el.addEventListener(type, fn, capture) 
yi 
function(el, type, fn) { 
el.attachEvent("on" + type, fn.bind(el, event)) 
} 


| 


ECMA262V5 对 其 认证 后 ， 唯 一 的 增强 是 对 调 
用 者 进行 检测 ， 确 保 它 是 一 个 函数 。 顺 便 总 结 一 
Te 


(1) calléobj.method(a,b,c)#!/method(obj,a,b,c) 
的 变换 。 


(2) apply 是 obj.method(a,b,C 〇 到 method(obj， 
[ab,c]) 的 变换 ， 它 要 求 第 2 个 参数 必须 存在 ， 一 是 
是 数组 或 Arguments 这 样 的 类 数组 ，NodeList 这 样 具 
有 争议 性 的 内 容 束 不 要 乱 传 进去 了 。 因 此 jQuery 对 
两 个 数组 或 类 数组 的 合并 是 使 用 jQuery.merge， 放 
弃 使 用 Array.prototype.push.apply。 


(3) bind 束 是 apply 的 变种 ， 它 可 以 动 持 this 对 
象 ， 并 且 预 完 注入 参数 ， 返 回 后 续 执 行 方 法 。 








这 3 个 方法 是 非常 有 用 ， 我 们 可 以 设法 将 它 


们 “ 偷 ” 出 来 。 


var bind = function(bind) { 
return{ 
bind: bind.bind(bind), 
call: bind.bind(bind.call), 
apply: bind. bind(bind.apply) 


}(Function.prototype. bind) 





那 怎 么 用 它们 呢 ? 比如 我 们 想 合 并 两 个 数组 ， 
直接 调用 concat， 方 法 如 下 。 


var a = [1, [2, 3], 4]; 
var b = [5,6]; 
console.log(b.concat(a)); //[5,6,1, [2,3],4] 





使 用 bind.bind 方法 则 能 将 它们 进一步 平坦 
化 。 


var concat = bind.apply([].concat); 
console.log(concat(b, a)); //[1,3,1,2,3,4] 








又 如 切片 化 操作 ， 它 经 党 用 于 转换 类 数组 对 象 


为 纯 数组 的 。 


var slice bind([].slice) 
var array slice({ 


console.log(array)//[ "aaa", "bbb", "ccc"] 








更 常用 的 操作 是 转换 arguments 对 象 ， 目 的 是 为 
了 使 用 数组 的 一 系列 方法 。 
function test() { 
var args = slice(arguments) 
console.log(args)//[1,2,3,4,5] 


} 
test(1, 2, 3, 4, 5) 





我 们 可 以 将 hasOwnProperty 提 取出 来 ， 判 定 对 
象 是 否 在 本 地 就 拥有 某 属 性 。 





var hasown = bind.call(Object.prototype.hasOwnProperty) ; 
hasOwn({a:1}, "a") // true 
hasOwn({a:1}, "b") // false 





使 用 bind.bind 就 需要 多 执行 一 次 。 


var hasOwn2 = bind.bind(Object.prototype.hasOwnProperty); 
hasOwn2({a:1}, "b")() // false 














上 面 bind.bind 的 行为 其 实 束 是 一 种 curry , € 
给 了 你 再 一 次 传 参 的 机 会 ， 这 样 你 瓯 可 以 在 内 部 判 
FEB RUIN SEL, TRE ARAB E PR BOR EE ETE 
设计 计算 器 的 连续 运算 上 非常 有 用 。 从 这 个 角度 来 
看 ， 我 们 可 以 得 到 一 个 信息 ，bind 者 重 于 作用 域 的 
动 持 ，curry 在 于 参数 的 不 断 补充 。 


我 们 可 以 编写 一 个 curry， 当 所 有 步骤 输入 的 
参数 个 数 等 于 最 初 定义 的 函数 的 形 参 个 数 时 ， 束 执 
Tes 








function curry(fn) { 
function inner(len, arg) { 
if (len == 0) 


return fn.apply(null, arg); 
return function(x) { 
return inner(len - 1, arg.concat(x)); 


}; 


return inner(fn.length, []); 


J 


function sum(x, y, Zz, w) { 
return X + y+2Z2+w; 


} 
curry(sum)('a')('b')('c')('d'); // => 'abcd' 





不 过 这 里 我 们 假定 用 户 每 次 都 只 传 入 一 个 参 
数 ， 所 以 我 们 可 以 改进 一 下 。 


function curry2(fn) { 
function inner(len, arg) { 

if (len <= 0) 
return fn.apply(null, arg); 

return function() { 
return inner(len - arguments.length, 

arg.concat(Array.apply([], arguments))); 
}; 


return inner(fn.length, []); 





这 样 束 可 以 在 中 途 传递 多 个 参数 ， 或 不 传递 参 
数 。 


curry2(sum)('a')(' 'c')('d'); // => 'abcd' 
curry2(sum)('a')( ‘c')()('d'); // => 'abcd' 
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self-curry 或 recurry 。 筷 强调 的 是 递归 调用 目 吴 来 
补 全 参数 。 





与 curry 相 似 的 是 partial。curry 的 不 足 是 参数 总 
是 通过 push 的 方式 来 补 全 ， 而 partial 则 是 在 定义 时 
所 有 参数 已 经 都 有 了 ， 但 茶 些 位 置 上 的 参数 只 是 个 
BMI RITE TREER ERREEN. A 
上 有 篇 文章 《Partial Application in JavaScript) #1] 
介绍 了 这 个 内 容 。 











Function.prototype.partial = function() { 
var fn = this, args = Array.prototype.slice.call(arguments) 


return function() { 
var arg = 0 
for (var 1 = 0; i < args.length && arg < arguments.leng 
th; i++) 
if (args[1i] === undefined) 
args[i] = arguments[argt++]; 
return fn.apply(this, args); 
}; 
} 





它 是 使 用 undefined 作为 占 位 符 。 


var delay = setTimeout.partial(undefined, 10); 
// 接 下 来 的 工作 就 是 代替 掉 第 一 个 参数 
delay(function() { 
alert("this call to will be temporarily delayed."); 











}) 





有 关 这 个 占 位 符 ， 该 博客 的 评论 列表 中 也 有 大 
量 的 讨论 ， 最 后 确定 下 来 是 使 用 _ 作 为 变量 名 ， 内 
部 还 是 指 同 undefined。 笔 者 认为 这 样 做 还 是 比 较 危 
险 的 ， 框 架 应 该 提供 一 个 特殊 的 对 象 ， 比 如 
Prototype 在 内 部 使 用 $break = {} 作 为 断 点 的 标识 。 
我 们 可 以 用 一 个 纯 空 对 象 作为 partial 的 占 位 符 。 





var _ = Object.create(null) 


纯 空 对 象 没 有 原型 ， 没 有 toString、valueOf 等 
AK AK A Object AVE, (RFA. FETE FRAAIE NX 
样 模 拟 它 。 





var _ = (function() { 
var doc = new ActivexObject('htmlfile' ) 
doc.write('<script><\/script>' ) 
doc.close() 
var Obj = doc.parentWindow. Object 


if (!0bj || Obj === Object) 
return 
var name, names = 
['constructor', 'hasOwnProperty', 'isPrototypeOf ' 
, 'propertyIsEnumerable', 'toLocaleString', 'toStri 
ng', 'valueof'] 
while (name = names.pop()) 
delete Obj.prototype[name ] 
return Obj 


}()) 





我 们 继续 回来 讲 partial。 


function partial(fn) { 
var A = [].slice.call(arguments, 1); 
return A.length < 1 ? fn : function() { 
var a = Array.apply([], arguments); 
var c = A.concat();// 复 制 一 份 
for (var i = 0; i < c.length; i++) { 
if (c[i] === _) {V// 蔡 换 占 位 符 
c[i] = a.shift(); 
} 


return fn.apply(this, c.concat(a)); 
} 
} 


function test(a, b, c, d) { 
return "a = W + a + W b 二 W + b + W C 二 W + C 十 W d = W + d 


} 
var fn = partail(test, 1, _, 2, _) 
fn(44, 55)// "a=1b= 44c d = 55" 


了 





curry、partial 的 应 用 场景 在 前 端 世界 (站 真心 不 
多 ， 前 端 讲 究 的 是 即时 显示 ， 许 多 API 都 是 同步 


的 ， 后 端 由 于 IO 操作 等 耗 时 长 ， 像 Node.js 提 供 了 大 
量 的 异步 函数 来 提高 性 能 ， 防 止 堵塞 。 但 是 过 多 异 
步 函 数 也 必然 带 来 回调 和 伦 套 的 问题 ， 因 此 我 们 需要 
通过 curry 等 函数 变换 ， 将 套 骸 减少 到 可 以 接受 的 程 
度 。 这 个 我 会 在 第 13 章 讲述 它们 的 使 用 方法 。 








函数 的 修复 涉及 apply 与 call 两 个 方法 。 这 两 个 
方法 的 本 质 就 是 生成 一 个 新 的 函数 ， 将 原 函 数 与 用 
户 传 参 放 到 里 面 执行 而 已 。 在 JavaScript 创 建 一 个 函 
BARE INE, Fy LENA RAU HM pw a IA SN, 
次 之 是 图 数 构造 希 ， 再 次 是 eval、setTimeout..….. 








Function.prototype.apply || (Function.prototype.apply = functio 
n (x, y) { 


x = x || window 

y=y |I[]; 

X.__ apply = this 
if (!x.__apply) 


Xe CONSEFUCEO lsphOPORV Des. apply = this; 
var r, j = y.length; 
switch oF A 


case r = X.__apply(); break; 

case { r= X.__apply(y[0]); break; 

case 2: r = x.__apply(y[0], y[1]); break; 

case 3: r = x.__apply(y[0], y[1], y[2]); break; 

case 4: r = x.__apply(y[@], y[1], y[2], y[3]); break; 
default: 


var a = []; 


for (var i = 0; i < j; ++i) 


a[i] Z "y[" + 1 + He Hea 
r 二 eval("x.__apply(" + a.join(",") + ce a Be 
break; 
} 
try { 


delete x.__apply ? x.__apply : x.constructor.prototype. 
__apply; 


catch (e) {} 
return r; 


}); 


Function.prototype.call || (Function.prototype.call = function 
() i 
var a = arguments, x = a[0], y = []; 
for (var i = 1, j = a.length; i < j; ++i) 
y[i - 1] = a[i] 
return this.apply(x, y); 
+); 





25 日 期 的 扩展 与 修复 


Date 构 造 右 是 JavaScript 中 传 参 形式 最 丰富 的 构 
as, KEP AA. 


new Date(); 
new Date(value) ;// 传 入 毫秒 数 
new Date(dateString); 


new Date(year, month, day /*, hour, minute, second, millisecond 
*/); 





其 中 第 3 种 可 以 玩 多 种 花样 ， 个 人 建议 只 使 
用 “2009/07/12 12:34:56”， 后 面 的 时 分 秒 可 省 略 。 这 
个 所 有 浏览 器 都 支持 。 此 构造 器 的 兼容 列表 可 见 下 
ce 


http://dygraphs.com/date-formats.html 


石 要 修正 它 的 传 参 ， 这 丽人 是 个 大 工程 ， 要 整 
个 对 象 符 换 反 ， 并 且 影 响 Object.prototype.toString 的 


类 型 判定 ， 因 此 不 建议 修正 。ES5.js 中 有 相关 源 
码 ， 大 家 可 以 看 这 里 。 


https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js 


JavaScript 的 日 期 是 抄 自 Java 的 java.util.Date， 
但 是 Date 这 个 类 中 的 很 多 方法 对 时 区 等 文 持 不 够 ， 
日 不 少 都 是 已 过 时 的 。Java 程 序 员 也 推荐 使 用 
calnedar 类 代 蔡 Date 类 。JavaScript 可 选择 的 余地 比 
较 少 ， 只 能 凑合 继续 用 。 比 如 : 对 属性 使 用 了 前 后 
矛盾 的 偏 移 量 ， 月 份 与 小 时 都 是 基于 0， 月 份 中 的 
天 数 则 是 基于 1， 而 年 则 是 从 1900 开 始 的 。 











接 下 来 ， 我 们 为 旧版 本 浏览 器 添加 几 个 
ECMA262 标 准 化 的 日 期 方法 吧 。 





if (!Date.now) { 
Date.now = function() { 
return +new Date; 


J 


} 
if (!Date.prototype.toISOString) { 
void function() { 


function pad(number) { 
var r = String(number); 


if (r.length === 1) { 
PSO" +r; 

} 

return r; 


} 


Date.prototype.toJSON = 
Date.prototype.toISOString = function() { 
return this.getUTCFullYear() 
+ '-' + pad(this.getUTCMonth() + 1) 


+ '-' + pad(this.getUTCDate() ) 
+ 'T' + pad(this.getUTCHours() ) 
+ ':' + pad(this.getUTCMinutes() ) 
+ ':' + pad(this.getUTCSeconds() ) 
+ ',' + String((this.getUTCMilliseconds() / 1000 
).toFixed(3)).slice(2, 5) 
+ aa 
}; 
}(); 


} 





IE6 和 和 IE7 中 ，getYear 与 setYear 方 法 都 存在 
bug， 不 过 这 个 修复 起 来 比较 简单。 


if ((new Date).getYear() > 1900) { 
Date.prototype.getYear = function() { 
return this.getFullYear() - 1900; 
}; 
Date.prototype.setYear = function(year) { 
return this.setFullYear(year); //+ 1900 


}; 





至 于 扩展 ， 由 于 涉及 本 地 化 ， 许 多 日 期 库 都 需 
要 改 一 改 才能 用 ， 其 中 以 dataFormat 这 个 很 有 用 的 
方法 较为 特别 。 笔 者 先 给 一 些 常 用 的 扩展 吧 ，。 


传 入 两 个 Date 类 型 的 日 期 ， 求 出 它们 相隔 多 少 
天 。 


function getDatePeriod(start, finish) { 
return Math.abs(start * 1 - finish * 1) / 60 / 60 / 1000 / 


24; 
} 





传 入 一 个 Date 类 型 的 日 期 ， 求 出 它 所 在 月 的 第 
Se 


function getFirstDateInMonth(date) { 
return new Date(date.getFullYear(), date.getMonth(), 1); 
} 





传 入 一 个 Date 类 型 的 日 期 ， 求 出 它 所 在 月 的 最 
局 一 大 % 


function getLastDateInMonth(date) { 


return new Date(date.getFullYear(), date.getMonth() + 1, 0) 


了 





传 入 一 个 Date 类 型 的 日 期 ， 求 出 它 所 在 季度 的 
第 一 天 。 


function getFirstDateInQuarter(date) { 
return new Date(date.getFullYear(), ~~(date.getMonth() / 3) 
* 3, 1); 
} 





传 入 一 个 Date 类 型 的 日 期 ， 求 出 它 所 在 季度 的 
最 后 一 天 。 


function getFirstDateInQuarter(date) { 
return new Date(date.getFullYear(), ~~(date.getMonth() / 3) 
* 3 + 3, 0); 
} 





判断 是 售 为 周年 。 





function isLeapYear(date) { 


return new Date(this.getFullYear(), 2, 0).getDate() == 29; 


} 
//EXT 


function isLeapYear2(date) { 


var year = data.getFullYear(); 
return !!((year & 3) == 0 && (year % 100 || (year % 400 == 
&& year))); 





取得 当前 月 份 的 天 数 。 





function getDaysInMonthi(date) { 
switch (date.getMonth()) { 
case 0: 
case 2: 
case 4: 
case 6: 
case 7: 
case 9: 
case 11: 
return 31; 
case 1: 
var y = date.getFullYear(); 
return y % 4 == © && y % 100 != 0 || y % 400 == 0 ? 
29 : 28; 
default: 
return 30; 


var getDaysInMonth2 
var daysInMonth 
30, 31]; 


(function() { 
[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 


function isLeapYear(date) { 
var y = date.getFullYear(); 
return y % 4 == © & y % 100 != 0 || y % 400 == Q; 

} 

return function(date) { // return a closure for efficiency 
var m = date.getMonth(); 


return m == 1 && isLeapYear(date) ? 29 : daysInMonth[m] 


}; 


HO; 


function getDaysInMonth3(date) { 

return new Date(date.getFullYear(), date.getMonth() + 1, 0) 
.getDate(); 
} 





[1] http://imququ.com/post/bom-and-javascript- 


trim.html 


[2] ”在 计算 机 科学 中 ， 柯 里 化 (Currying〉 是 把 接 
受 多 个 参数 的 函数 变换 成 接受 一 个 里 一 参数 (最 初 
函数 的 第 一 个 参数 ) 的 函数 ， 并 且 返 回 接受 余下 的 
参数 且 返 回 结 末 的 新 图 数 的 技术 。 这 个 技术 由 
Christopher Strachey 以 逻辑 学 家 Haskell Curry 命 

的 ， 尽 管 它 是 Moses Schnfinkel 和 Gottlob Frege 发 明 
的 。patial，bind 只 是 其 一 种 变 体 。 其 用 处 有 3: 1B 
PUFA; 2. 提 前 返回 ;3. 延 迟 计算 /运行 。 

















AS EE TCP IENRA AT ERE ARR, hE MDS AS 
性 的 前 线 阵 地 。 人 们 学 会 navigator. userAgent 来 判 
定 用 户 正 在 使 用 的 浏览 器 ， 然 后 选择 性 地 去 文 持 A 


浏览 器 或 放弃 B 浏 览 器 。 这 导致 浏览 器 厂商 非常 紧 
ck, WAARA CASTS ED is. 2010~ 

2014 年 ， 中 国 互联 网 爆发 著名 的 “3Q 大 战 "， 其 间 

360 安 全 浏览 右 无 法 访问 QQ 空间 ， 作 为 对 策 ，360 
en 伪造 成 一 个 普通 
chromed] as, Dopp a A N Daas RR BOK YER 
败 。 








时 人 至今 日， 浏览 堪 咖 探 已 经 不 推荐 了 ， 但 在 某 
些 场合 我 们 还 是 需要 的 ， 比 如 一 些 数据 统计 代码 ， 
著名 的 有 站 长 统计 、 百 度 统计 、 腾 讯 统 计 和 Google 
Analytics。 而 特征 侦 测 是 Prototype 时 期 发 展 起 来 的 
一 个 技术 ， 有 具体 是 判定 茶 个 原生 对 象 有 没有 此 方法 
或 属性 ， 有 了 时 严格 一 些 ， 则 会 执行 这 个 方法 ， 看 它 
有 没有 达到 预期 的 值 。 在 标准 浏览 器 里 ， 它 们 提供 
了 document.implementation.hasfeature 方 法 ， 可 惜 有 
bug， 不 准确 。 在 本 书 快 成 形 时 ，W3C 又 推出 了 
CSS.supports 方 法 ， 为 大 家 叉 提 供 一 条 人 处理 兼容 性 








问题 的 新 过 路， 如 图 3-1 所 示 。 


1SIE6 





| | isIE7 
leadingWhitespace 
bad 1SIE8 
tbody - | 
| elisEj isme 
htmlSerialize | 
isIE10 
style 
isIE11 
hrefNormalized | 
特性 判定 © - - isEdge 
opacity O 浏览 器 判定 | 
isChrome 
cssFloat | 
| isOpera 
checkOn | 
isFirefox 
optSelected 
isSafari 





样式 判定 Ste 


图 3-1 


主流 浏览 器 有 5 个 : IE . Firefox, Opera 
、Chrome 和 Safari 。 早 期 所 有 框架 都 是 通过 


yon] WA BĘ. 


navigator .userAgent 进行 判定 ， 与 浏览 器 厂商 斗 
吞 斗 谋 。 


s 


jQuery 给 出 的 解决 方案 jQuery.browser ， 目 前 
己 移 出 框架 本 体 ， 成 为 一 个 插件 。 





(function(jQuery, window, undefined) { 
"use strict"; 
var matched, browser; 


jQuery.uaMatch = function(ua) { 
ua = ua.toLowerCase(); 


var match = /(chrome)[ \/]([\w.]+)/7.exec(ua) | | 
/(webkit)[ \/]([\w.]+)/7.exec(ua) | | 
/(opera)(?:.*version|)[ \/]([\w.]+)/7.exec(ua) | 


/(msie) ([\w.]+)/.exec(ua) | | 
ua.indexOf("compatible") < © && /(mozilla)(?:.* 
? rv:([\w.]+)|])7.exec(ua) | | 


了 


var platform_match = /(ipad)/.exec(ua) | | 
/(iphone)/.exec(ua) || 
/(android)/.exec(ua) | | 


[]; 


return { 
browser: match[ 1] |] "", 
version: match[ 2 ] || "o", 
platform: platform_match[0] | | 


matched 
browser 


= jQuery.uaMatch(window.navigator.userAgent); 
= {}; 
if (matched.browser) { 
browser[ matched.browser ] = true; 
browser.version = matched.version; 


} 


if (matched.platform) { 
browser[ matched.platform ] = true 


} 


// Chrome is Webkit, but Webkit is also Safari. 
if (browser.chrome) { 
browser .webkit = true; 
} else if (browser.webkit) { 
browser.safari = true; 


} 


jQuery.browser = browser; 


})(jJQuery, window); 





mass Framework 给 出 的 解决 方案 如 下 。 





//https://github.com/RubyLouvre/mass-Framework/blob/1.4/more/br 
ower .js 
define("brower", function( ){ 
var w = window,ver = w.opera ? (opera.version().replace(/\ 
d$/, "") _ 0) 
: parseFloat((/(?:IE |fox\/|ome\/|ion\/)(\d+\.\d)/. 
exec(navigator.userAgent) || [,9])[1]); 


return { 
// 测 试 是 否 为 IE 或 内 核 为 trident， 是 则 取得 其 版 本 号 
ie: !!w.VBArray && Math.max(document.documentMode||0, v 
er ),// 内 核 trident 
// 测 试 是 否 为 Firefox， 是 则 取得 其 版 本 号 
firefox: !!w.netscape && ver,// 内 核 G6ecko 
// 测 试 是 否 为 0pera， 是 则 取得 其 版 本 号 











opera: !!w.opera && ver,// 内 核 Presto 9.5 为 Kestrel 10 为 C 
arakan 

// 测 斌 是否 为 Chrome， 是 则 取得 其 版 本 号 

chrome: !! w.chrome && ver ,// 内 核 V8 





// 测 斌 是否 为 Safari， 是 则 取得 其 版 本 号 
safari: /apple/i.test(navigator.vendor) && ver// 内 核 We 





mass 成 形 较 晚 ， 是 使 用 特征 侦 测 实现 的 。 





特征 侦 测 的 好 处 是 ， 浏 览 郁 不 会 随意 去 邱 东 一 


个 功能 。 不 过 要 注意 的 是 ， 不 要 使 用 标准 属性 与 方 
法 做 判定 依据 。 每 个 浏览 器 都 有 上 自己 的 私有 实现 ， 
我 们 用 它们 做 判定 就 可 以 了 。 下 面 是 我 收集 的 其 他 
一 些 判 定 方法 。 





ie = !!document.recalc 

ie = !!window.VBArray 

ie = !!window.ActivexObject 

ie = !!window.createPopup; 

ie = /*@cc_on!@*/!1; 

ie = document.expando;//document.allvEopera firefox 的 古老 版 本 也 存 





ie = (function() {//IE10 PAR 

var v = 3, div = document.createElement('div'); 

while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><br><! 
[endif]-->', div.innerHTML ) 


了 


returnv>4?vi Ivy; 
}()); 
ie678 = !+"\vi"; 
ie678 = !-[1, ]; 
1e678 = '\v' == 'v'; 
1e678 = ('a~b'.split(/(~)/))[1] == "b" 
1e678 = 0.9.toFixed(0) == "0" 





























ie678 = /\w/.test('\u0130') // 由 群 里 的 abcd 友 情 提供 
ie8 = window. toStaticHTML 
ie9 = window.msPerformance 


1e678 = O//@cc_on+1; 





ie67 = !"1" [0] // 利 用 IE6 或 TE5 的 字符 串 不 能 使 用 数组 下 标的 特征 
ie8 ! !window.XDomainRequest; 
ie9 document.documentMode && document.documentMode === 9; 























// 基 于 条 件 编译 的 嗅 探 脚本 ，IE 会 返回 其 JS 引擎 的 版 本 号 ， 非 IE 返回 0 
var ieVersion = eval("''+/*@cc_on" + " @_jscript_version@*/-0") 
a. 











ie9 = ieVersion === 5.9 

ie8 = ieVersion === 5.8 

ie7 = ieVersion === 5.7 

ie6 = ieVersion === 5.6 

ie5 = ieVersion === 5.5 

ie10 = window.navigator.msPointerEnabled 

ie11 = '-ms-scroll-limit' in document.documentElement.style 
opera = !!window.opera; 

//https://developer .mozilla.org/En/Windows_Media_in_Netscape 
firefox = !!window.GeckoActivexObject 

firefox = !!window.netscape // 包 括 firefox 

firefox = !!window.Components 

firefox = !!window.updateCommands 

safari = !!(navigator.vendor && navigator.vendor.match(/Apple/) 
) 

safari = window.openDatabase && !window.chrome; 

chrome = !!(window.chrome && window. google) 





至 于 移动 设备 的 相关 判定 ， 建 议 看 百度 fex- 
team 出 品 的 ua-device 库 。 


https://github.com/fex-team/ua-device 

isIPhone = /iPhone/i.test(navigator.userAgent); 
isIPhone4 = window.devicePixelRatio >= 2 
isIPad = /iPad/i.test(navigator.userAgent); 


isAndroid = /android/i.test(navigator.userAgent ) ; 
isIOS = isIPhone || isIPad ; 








这 里 解释 一 下 iPhone 的 判定 。 在 网 页 中 ，pixel 
与 point 比 值 称 为 device-pixel-ratio， 普 通 设备 都 是 
1, iPhone 4 是 2， 有 些 Android 机 型 是 1.5。 


3.2 document.all i iH] 


上 面 笔者 给 出 了 一 系列 特征 咒 探 的 方法 ， 可 能 
会 让 一 些 人 不 解 ， 为 什么 没有 document.all 呢 ? 
document.all 是 正 下 一 个 很 好 用 的 选择 器 API。 大 概 
是 1997 年 ，IE4 友 布 时 市 来 的 最 好 用 的 API 之 一 。 猎 
然 这 么 好 用 ， 肯 定 会 被 人 抄 去 。 但 很 长 时 间 内 ， 它 
还 是 IE 独 有 的 。 一 些 旧 的 技术 书 与 博客 ， 介 绍 它 为 
IE 的 判定 手段 也 是 没有 错 ， 但 到 2002 年 ， 出 现 了 转 
机 。 











Operai X NARRIN bias, AVS EAR, RA AEG 
容 两 套 API: IE 的 与 w3c 的 。 比 如 说 下 的 
attachEvent， 它 也 是 最 早 文 持 。 当 Opera 实 现 了 
document.all 后 ， 这 个 通用 的 正 判 定 焉 失灵 了 了， 许多 
开发 者 给 Opera 提 issue， 人 家 并 不 想 修 复 。 





此 后 ，Firefox 也 决定 实现 document.all， 不 过 它 


机 了 一 个 小 聪明 ， 那 就 是 你 可 以 正常 的 使 用 
document.all， 但 你 无 法 检测 到 它 的 存在 。 





console.log(document.all + "" ) 
//"(object HTMLA11Collection]" 
console.log(typeof document.all) 
//"undef ined" 


console. log(!!document.all) 
//false 





JavaScript% Brendan Eich# A “undetected 
document.all”。 但 在 当时 很 多 人 也 发 现 了 ， 
document.all 并 不 是 真 的 检测 不 到 。 


console.log(document.all === undefined) 
//false 
console.log("all" in document) 


//true 





当时 Mozilla 的 人 也 回复 了: “这 不 是 bug， 这 是 
featurel1>。 现 如 今 所 有 的 浏览 器 都 是 这 样 的 实现 ， 
HTML 5 规范 里 也 是 这 么 规定 的 。 


https: //www.w3.org/TR/html5/obsolete.html#dom-document -all 


ee 


Safari 才 刚刚 起 步 ， 但 也 有 收 到 来 自用 户头 于 
不 文 持 document.all 的 bug。2005 年 年 底 ，Safari 学 
Firefox， 实 现 了 undetectable document.all. 


https://bugs.webkit.org/show_bug.cgi?id=6268 


2008 年 ，Opera 在 9.50 Beta 2 版 本 将 自己 直接 暴 
露 了 多 年 的 document.all 也 改 成 了 undetectable， 变 更 
记录 里 是 这 么 写 的 : “Opera now cloaks 
document.all”. Opera 的 工程 师 当 年 还 专门 写 了 一 篇 
文章 讲 了 document.all 在 Opera 中 的 变迁 ， 还 说 到 
document.all 24 XE 44 $x FE dE“ Webi AR EE TH” o 





20084E4F JE, Chrome 1.0 发 布 ，Chrome 是 基于 
Webkit 和 V8 的 ，V8 当 然 得 配合 Webkit 里 的 
document.all 的 实现 。 


很 戏剧 性 的 是 ， 在 2013 年 ， 连 下 自己 (IE 11) 


tH Beet Sdocumentall, Hiii, HA DARN ot 
器 里 document.all 都 是 个 假 值 了 。 


在 V8 里 的 实现 是 : 一 个 对 象 都 可 以 被 标记 成 
undetectable， 很 多 年 来 只 有 document.all 带 有 这 个 标 
记 ， 这 是 相关 的 代码 片段 和 注释 。 





// Tells whether the instance is undetectable. 

// An undetectable object is a special class of JSObject: 'type 
of' operator 

// returns undefined, ToBoolean returns false. Otherwise it beh 
aves like 

// anormal JS object. It is useful for implementing undetecta 


ble 

// document.all in Firefox & Safari. 

// See https://bugzilla.mozilla.org/show_bug.cgi?id=248549. 
inline void set_is_undetectable(); 

inline bool is_undetectable(); 





然后 在 typeof 的 实现 里 ， 如 果 typeof 的 参数 是 
undefined#\ # 7 undetectable, WWR [=] “undefined” . 


当然 ， 我 们 在 JS 中 很 难 判定 哪些 是 
undetectable， 但 undetectable 的 内 容 都 是 与 DOM 和 
BOM 有 关 ， 那 里 是 浏览 器 可 以 目 由 发 挥 的 领域 。 并 
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人 在 这 个 领域 的 耕耘 之 深 。 


3.3 ”事件 的 文 持 侦 测 


Prototype 的 核心 成 员 kangax 写 了 一 篇 叫 
(Detecting event support without browser sniffing) 
文章 ， 来 判定 浏览 器 对 某 种 事件 的 支持 ， 里 面 给 出 

的 实现 如 下 。 


var isEventSupported = (function() { 
var TAGNAMES = { 
'select': 'input', 'change': 'input', 
'submit': 'form', 'reset': 'form', 
'error': 'img', 'load': 'img', ‘abort': 'img' 
} 
function isEventSupported(eventName) { 
var el = document.createElement (TAGNAMES[ eventName ] 
‘div'); 
eventName = 'on' + eventName; 
var isSupported = (eventName in el); 
if (!isSupported) { 
el.setAttribute(eventName, 'return;'); 
isSupported = typeof el[eventName] == 'function'; 


} 
el = null; 
return isSupported; 


} 
return isEventSupported; 


HO; 








现在 jQuery 与 mass 使 用 的 脚本 都 是 其 简化 版 ， 


其 中 mass 对 IE 内 存 泄 漏 做 了 优化 。 


$.eventSupport = function(eventName, el) { 

el = el || document .documentElement 

eventName = "on" + eventName; 

var ret = eventName in el; 

if (el.setAttribute && !ret) { 
el.setAttribute(eventName, ""); 

function"; 

el.removeAttribute(eventName) ; 


} 
el = null; 
return ret; 





不 过 哪 一 个 也 好 ， 这 种 检测 只 对 DOM0 事 件 凑 
效 ， 像 DOMMouseScroll、DOMContentLoaded、 
DOMFocusIn, DOMFocusOut, 
DOMSubtreeModified. DOMNodelnserted, 
DOMNodeRemoved 这 些 以 DOM 开 头 的 事件 区 无 能 
为 力 了 。 





注意 : 上 面 提 到 的 许多 以 DOM 开 头 的 事件 都 
是 已 被 废弃 的 DOM4 变 动 事件 MutationEvents ， 只 
有 chrome 还 继续 支持 它们 。 因 此 大 家 不 用 费心 记 住 





Elle 


DOMAttrModified 
DOMAttributeNameChanged 
DOMCharacterDataModified 
DOMElementNameChanged 
DOMNodeInserted 
DOMNodeInsertedIntoDocument 
DOMNodeRemoved 
DOMNodeRemovedFromDocument 
DOMSubtreeModified 


* 
* 
* 
* 
* 
* 
* 
* 
* 





这 些 事件 中 有 的 非常 有 用 ， 比 如 : 
DOMMouseScroll，Firefox 一 直 不 支持 
mousewheel， 只 能 用 它 做 蔡 代 品 ; 
DOMContentLoaded 是 实现 domReady 的 重要 事件 ; 
DOMNodeRemoved 是 判定 元 系 是 否 从 其 父 市 点 移 
除 ， 父 节 扣 可 能 是 其 他 元 系 市 点 或 文档 雄 片 ; 
DOMNodeRemovedFromDocumentsz #4 & DOM ; 
DOMAttrModified 以 前 经 常用 于 模拟 I 下 的 
onpropertychange; DOMCharacterDataModified 用 于 
监听 contenteditable 为 true 的 元 素 内 容 变动 。 























在 mass Framework 中 ， 是 使 用 以 下 方法 判定 
的 。 


https://github.com/RubyLouvre/mass -Framework/blob/1.4/event.js 
tr 








y { 
// 如 果 浏 览 器 支持 创建 MouseScrollEvents 事 件 对 象 ， 那 么 就 用 DOMMouseSc 
roll 
document.createEvent("MouseScrollEvents"); 
eventHooks.mousewheel = { 
bindType: "DOMMouseScroll", 
delegateType: "DOMMouseScroll" 





J}; 
// 如 果 某 一 天 , Firefox 回 心 转 意 支持 mousewheel， 那 么 我 们 就 不 需要 这 个 钧 


if ($.eventSupport("mousewheel")) { 
delete eventHooks.mousewheel; 


} 
} catch (e) { 
} 





此 外 ，mass 还 对 focusin 进 行 识 别 。focusin 与 
focusout 是 一 对 ， 判 定 当 中 一 个 残 明 日 另 一 个 情 
况 。 这 两 个 事件 也 很 重要 ， 用 于 实现 focus 与 blur 的 
事件 代理 ， 因 为 focus 与 blur 不 文 持 冒 泡 ， 需 要 用 它 
们 的 冒 泡 版 实现 〈 假 知 不 文 持 focusin 与 focusout， 
jQuery 也 找到 办 法 了 ， 不 过 有 原生 的 残 用 原生 
的 ) 。 




















// 首 先 判定 它 是 否 是 W3C 阵 营 ，IE 肯 定 支 持 
$.Support .focusin = !!window.attachEvent; 
$(function() { 
var div = document.createElement ("div"); 
document .body.appendChild(div); 
div.innerHTML = "<a href='#'></a>"; 
if (!$.support.focusin) { 
a = div.firstChild; 











a.addEventListener('focusin', function() { 
$.support.focusin = true; 

}, false); 

a.focus(); 





CSS3 添 加 两 种 动画 ， 一 种 是 transition 渐变 动 
i] ， 一 种 是 animation 补 间 动 画 ， 它 们 在 结束 时 都 
有 相应 的 事件 回调 。 但 在 标准 化 过 程 中 ， 浏 览 器 给 
它们 起 的 名 字 相 当 没 规律 。 这 个 也 需 预 先 侦 测 出 
He 








下 面 是 bootstrap 的 实现 ， 上 听 说 来 源 于 
modernizr ， 比 较 粗 糙 。 比 如 说 你 现在 用 的 Opera 已 
经 文 持 不 市 前 级 的 标准 事件 名 ， 它 还 是 返回 


oTransitionEnd. 


$.Support.transition = (function() { 


var transitionEnd = (function() { 
var el = document.createElement('bootstrap'), 
transEndEventNames = { 
'WebkitTransition': 'webkitTransitionEnd', 
'MozTransition': 'transitionend', 
'OTransition': 'oTransitionEnd otransitionend', 
"transition': 'transitionend' 


for (var name in transEndEventNames) { 
if (el.style[name] !== undefined) { 
return transEndEventNames|[name ] 
} 
} 
}()) 


return transitionEnd && { 
end: transitionEnd 


} 
})() 





animation 种 间 动 画 的 检测 可 以 看 一 下 avalon 
的 effect 模 块 。 








//animationend 有 两 个 可 用 形态 
//TE10+, Firefox 16+ & Opera 12.1+: animationend 
//Chrome/Safari: webkitAnimationEnd 
//http://blogs.msdn.com/b/davrous/archive/2011/12/06/introducti 
on-to-css3-animat ions.aspx 
//TE1OtK AY LAH FEMSAnimationEndiit, (ANSE type 依 然 为 animati 
onend 
// el.addEventListener("MSAnimationEnd", function(e) { 
// alert(e.type)// animationend! ! ! 
// }) 
var checker = { 

"AnimationEvent': '‘animationend', 

"WebKitAnimationEvent': 'webkitAnimationEnd' 





var ani 
for (name in checker) { 


if (window[name]) { 
ani = checker[name]; 
break; 


} 


if (typeof ani === "String") { 
SsupportAnimation = true 
animationEndEvent = ani 





3.4 样式 的 文 持 侦 测 





CSS3 带 来 许多 好 用 的 样式 ， 但 抹 烦 的 是 每 个 
浏览 俐 部 有 目 己 的 私有 前 级 (或 叫 厂 两 前 级 ) 
mass Framework 与 avalon 提 供 了 一 人 er 
它们 ， 如 果 存 在 ， 则 返回 可 用 的 驼峰 风格 样式 
如 采 不 存在 ， 束 返回 nu]l。 


var prefixes = ['', '-webkit-', 

var cssMap = { 
"float": $.support.cssFloat ? 'cssFloat' : 'styleFloat', 
background: "backgroundColor" 


了 
function cssName(name, host, camelCase) { 
if (cssMap[name]) { 
return cssMap[name]; 


host = host || document.documentElement 


for (var i = 0, n = prefixes.length; i < n; i++) { 
camelCase = $.String.camelize(prefixes[i] + name); 
if (camelCase in host) { 
return (cssMap[name] = camelCase); 


} 


return null; 





一 个 样式 名 可 以 对 应 多 种 样式 值 ， 比 如 display 
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一 种 ， 可 以 通过 一 个 叫 CSS.supports 的 API 碍 询 。 如 
果 不 文 持 ， 则 尝试 一 下 这 个 开源 项 目 ， 显 然 它 还 有 
很 多 探 不 出 来 的 。 


https://github.com/termi/CSS.supports 


3.5 jQuery 一 些 常 用 特征 的 含义 


jQuery 在 support 模 块 列 举 了 一 些 常 用 的 DOM 特 
征 的 文 持 情 况 ， 不 过 它们 的 名 字 起 得 很 奇怪 ， 这 里 
逐一 揭 开 它们 的 谜底 。 由 于 这 些 特征 在 jQuery 不 同 
版 本 变动 很 大 ， 本 书 以 jQuery1.8 为 准 。 


e leadingWhitespace : #1) 2 il) Was EET 
innerHTML 赋 值 时 ， 有 是否 存在 trimLeft 操 作 。 这 
个 原本 是 下 出 来 摘 的 ， 应 该 遭 循 正 的 游戏 规则 
才 对 。 结 果 其 他 浏览 器 一 直 认 为 要 忠于 用 户 的 
原始 值 ， 最 前 的 空 晶 不 能 省 挥 ， 要 变 成 一 个 文 
本 节点 。 最 后 微软 将 下 6、IE7、IE8 返 回 false， 
其 他 浏览 器 返回 true。 

tbody : 指 在 用 innerHTML 动态 创建 元 素 时 ， 浏 
览 器 会 在 多 个 tr 元 素 外 面包 衷 一 个 tbody 元 系 
(如 果 你 没有 添加 的 话 ) ， 但 如 果 这 只 是 一 个 
空 table 元 素 ， 标 准 浏览 器 是 不 会 插入 tbody 的 ， 








而 旧式 正则 没 加 判定 地 乱 添加 tbody 元 素 ， 导 致 
我 们 的 业务 代码 与 预期 的 不 一 样 。 自 动 插入 
tbody 这 一 特征 是 非常 棒 的 ， 在 表格 布局 的 年 
代 ， 如 果 没 有 tbody，table 会 在 浏览 器 解析 到 闭 
合 标签 时 才 显 示 出 来 。 换 言 之 ， 如 果 这 个 表格 
很 大 、 很 长 ， 用 户 会 什么 也 看 不 到 。 但 有 了 
tbody 分 段 识 别 和 显示 ， 避 免 了 页 面 长 时 间 一 片 
空白 后 突然 一 下 子 内 容 全 部 出 来 的 局 面 。 看 下 
面 的 实验 。 








var div = document.createElement("div"); 
div.innerHTML = "<table></table>" 
alert(div.innerHTML) 


//TE6783& [=] "<TABLE><TBODY></TBODY></TABLE>" 
// 其 他 返回 "<table></table>" 








。htmlSerialize : 判定 浏览 器 是 否 完 好 文 持 用 
innerHTML 转 换 一 个 符合 html 标 签 规 则 的 字符 串 
为 一 个 元 素 节 点 ， 此 过 程 jQuery 称 之 为 序列 化 。 
但 正文 持 不 完好 ， 包 括 script、link、style、meta 











在 内 的 no-scope 元 素 都 转换 失败 ， 需 要 在 它 前 面 
添加 一 些 字 符 ， 如 "x<script src="xxx"> 
<\/script>", "&shy;<script src="xxx"> 
<\/script>" 或 者 "<br class= 'remove'> 
<script src="xxx"><\/script>" 。 像 HTML5 
的 新 标签 ， 当 然 也 文 持 不 好 ， 侦 测 结果 同上 。 

e style: 这 个 命名 很 难民 ， 不 看 源码 不 知道 是 什 
么 意思 。 真 相 是 判定 getAttribute 能 人 否 返 回 style 的 
用 户 预 设 值 。IE6、IE7、IE8 没 有 区 分 特性 属 
性 ， 返 回 一 个 CSSStyleDeclaration 对 象 。 

。hrefNormalized : 同样 莫名 其 妙 ， 意 为 判定 
getAttribute 能 否 返回 href 的 用 户 预 设 值 。 下 会 多 
此 一 举 ， 补 充 为 完整 路 径 给 你 。 

e opacity: 判定 是 任 文 持 opacity 样 式 伸 。IE6、 
IE7、IE8 不 文 持 ， 要 用 透明 小 镜 。 

e cssFloat : 判定 float 样 式 值 在 DOM 的 名 字 是 哪 
个 ，W3C 为 cssFloat，IE6、IE7、IE8 为 

















styleFloat. 

e checkOn : 在 大 多 数 浏览 器 中 checkbox 的 value 
默认 为 on， 唯 有 Chrome 返 回 空 字 符 串 。 

。optSelected : 判定 能 人 否 正 确 地 取得 动态 添加 的 
option 元 素 的 Selected。 了 E6 一 正 10 与 老 版 本 的 
Safari 对 动态 添加 的 option 没 有 设置 为 true。 解 决 
办 法 为 ， 在 访问 selected 属 性 前 ， 先 访问 其 父 节 
点 的 selectedIndex 必 性， 强制 它 计 算 option 的 


selected. 








<select id="optSelected"> 

</select> 

<script type="text/javascript"> 
var select = document.getElementById('optSelected'); 
var option = document.createElement('option'); 
select .appendChild(option); 


alert(option.selected); 

select.selectedIndex; 

alert(option.selected); 
</script> 





e optDisabled : 判定 select 元 素 的 disabled 属 性 是 
个 影响 到 子 元 又 的 disabled 取 值 。 在 Safari 中 ， 一 





日 select 元 素 被 disabled， 它 的 孩子 也 被 
disabled， 导 致 一 个 值 也 取 不 到 。 

checkClone : 是 指 一 个 checkbox 元 素 ， 如 果 设 
置 了 checked=true， 且 在 多 次 元 隆 后 ， 它 的 复制 
癌 能 否 保 持 为 tue。 这 个 只 有 在 Safari4 中 返回 
false， 其 他 为 true。 





inlineBlockNeedsLayout : 判定 是 个 使 用 
hasLayout 方 法 让 display:inline-block 和 生效。 这 个 只 有 
IE6, IE7, IE8Atrue. 


。 getSetAttribute : 判定 是 否 区 分 特性 属性 
Gatttribute 与 property) 。 只 有 IE6、IE7、IE8 为 
false. 

e noCloneEvent : FE (ER ill TURIN EnA iil 
attachEvent 比 定 的 事件 ， 只 有 旧版 本 下 及 其 兼容 
模式 返回 false。 

。enctype : 判定 浏览 器 是 否 支 持 encoding 属 性 ， 





IE6、IE7 要 用 encoding 属 性 代 蔡 。 

boxModel : 判定 浏览 器 是 否 在 content-box 例 子 
模型 的 演 染 模式 下 。submitBubbles， 
changeBubbles，focusinBubbles: 判定 浏览 絮 是 
售 文 持 这 些 事件 ， 一 直上 骨 泡 到 document。 
shrinkWrapBlocks : 判定 元 素 是 否 会 被 子 元 素 
撑 开 。 在 IE6、IE7、IE8 中 ， 非 替换 元 素 Hie 
置 了 大 小 与 hasLayout 的 情况 下 ， 会 将 其 父 级 元 
RK. 

html5Clone : 判定 能 售 使 用 cloneNode 复 制 
HTML5 的 新 标签 ， 旧 版 本 下 不 文 持 ， 需 要 用 到 
outerH TML. 

deleteExpando : #7 RAMA TA ENA 
定义 属性 [站 ， 这 用 于 jQuery 缓存 系统 。 旧 版 本 
IE 不 文 持 ， 会 抛 错 ， 只 能 置换 为 undefined。 
pixelPosition : 判定 getComputedStyle 能 个 转换 
元 素 的 top、left、right、bottom 的 百分比 值 。 这 
个 webkit 系 出 现 问 题 ， 需 要 用 到 Dean Edwards 大 











神 的 hack。 

e reliableMarginRight : 判定 getComputedStyle 能 
个 正确 取得 元 素 的 marginRight。Safari 的 早期 版 
本 总 是 取 回 一 个 很 大 的 数 。 

e clearCloneStyle : IE9、IE10 出 现 的 奇 琅 bug， 妆 
复制 一 个 指定 了 background-* 样 式 的 元 素 ， 对 复 
制品 的 背景 进行 清空 时 ， 也 会 清空 原来 的 。 








Ha MEAS S, BEAN Dias IE E Wh 
本 ， 标 准 浏 览 占 引发 的 各 种 bug 已 超越 EE 了。 特征 
侦 测 不 退 反 进 ， 越 来 越 重 要 了 。 


[1] 蕉 换 元 素 是 浏览 器 根据 其 标签 的 元 素 与 属性 
来 判断 显示 具体 的 内 容 。img、input、textarea、 
select, object hE R RIR, KENAA K 
MIAR. BALAP ITEE, EAN 
line-height。 剩 下 的 是 不 可 蔡 换 元 素 ， 他 们 将 内 容 
直接 告诉 浏览 器 ， 将 其 显示 出 来 。 比 如 p 的 内 容 、 


label 的 内 容 ， 浏 览 器 将 把 这 段 内 容 直 接 显示 出 来 。 
非 蔡 换 元 素 添 加 padding-top 或 padding-bottom， 不 影 
MTER, ENR aE, margin-top, 
margin-bottom 对 行 框 没有 任何 影响 。 添 加 左右 边 距 
会 影响 非 蔡 换 元 素 水 平 位 置 。 要 使 非 蔡 换 元 素 在 父 
元 素 框 内 居中 ， 可 以 设 定 line-height = 父 元 素 框 的 高 
E. 








[2] ”要 理解 delete 操 作 符 在 浏览 器 上 是 如 何 运 算是 
一 个 非常 复杂 的 问题 。 当 然 我 声明 一 个 变量 时 ， 它 
实际 上 成 为 全 局 变量 的 某 个 属性 。 既 然 成 了 属性 ， 
HLTA JB VE AN SHEE N AEA ReadOnly, 
DontEnum, DontDelete 和 Internal。 某 个 属性 不 能 删 
除 《〈 删 除 不 成 功 或 干脆 抛 错 ) ， 融 是 由 DontDelete 
这 个 特性 决定 的 。 内 建 对 象 的 一 些 属性 拥有 内 部 属 
性 DontDelete， 因 此 不 能 被 删除 ， 特 殊 的 arguments 
变量 〈 如 我 们 所 知 的 ， 活 化 对 象 的 属性 ) 拥有 
DontDelete; 任何 函数 实例 的 langh (返回 形 参 长 





FE) 属性 也 拥有 DontDelete; 与 函数 arguments 相 关 
联 的 属性 也 拥有 DontDelete， 同 样 不 能 被 删除 。 


oe aye Tj 
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类 与 继承 在 JavaScript 的 出 现 ， 说 明 JavaScript 
己 经 到 达 大 规模 开 友 的 门 榄 了。 在 此 之 前 的 ES4， 
区 试图 引入 类 、 模 块 等 东西 ， 也 只 不 过 把 类 延迟 到 
ES6。 到 目前 为 止 ， 只 有 少量 浏览 占 文 持 它 ， 当 然 


我 们 也 可 以 直接 上 ES6， 然 后 使 用 babel 编 译 我 们 的 
源码 。 曾 经 一 段 时 间 ， 类 工厂 是 框架 的 标 配 。 本 章 
将 会 介绍 如 何 模 拟 类 及 如 何 使 用 ES6 的 真正 类 。 





4.1 JavaScript 对 类 的 文 撑 





在 其 他 语言 中 ， 类 的 实例 都 要 通过 构造 函数 
new 出 来 。 作 为 一 个 刻意 模仿 Java 的 语言 ， 
JavaScript 存 在 new 操 作 符 ， 并 且 筷 的 所 有 函数 都 可 
以 作为 构造 器 。 构 造 器 与 普通 的 方法 没有 什么 区 
别 。 浏 览 器 为 了 构建 它 繁 花 似 锅 的 生态 圈 ， 比 如 
Node, Element. HTMLElement、 
HTMLParagraphElement， 显 然 使 用 继承 关系 方便 一 
些 方 法 或 属性 的 共享 ， 于 是 JavaScript 从 其 他 语言 借 
鉴 了 原型 这 种 机 制 。 








prototype 作为 一 个 特殊 的 对 象 属性 存在 于 
一 个 图 数 上 。 当 一 个 函数 通过 new 操 作 符 "分娩 ?出 
其 孩子 一 一 实例 *， 这 个 名 为 实例 的 对 象 残 拥 有 这 
个 函数 的 prototype 对 象 所 有 的 一 切 成 员 ， 从 而 实现 
所 有 实例 对 象 都 共享 一 组 方法 或 属性 。 而 JavaScript 
所 谓 的 “类 ?就 是 通过 修改 这 个 prototype 对 象 ， 以 区 











别 原生 对 象 及 其 他 目 定 义 “ 类 ”。 在 浏览 器 中 ，Node 
这 个 类 就 是 基于 Object 修改 而 来 的 ，Element 则 是 基 
于 Node， 而 HIMLElement 又 基于 Element...…….. 相对 
于 我 们 的 工作 业务 ， 我 们 也 可 以 创建 自己 的 类 来 实 
现 重 用 与 共 诗 ， 如 图 4-1 所 示 。 


构造 函数 原型 实例 化 对 象 


ZRAK 
prea constructor: ... 继承 new Dog Q 


includes: ... 


prototype : l- 关联 I 继承 — new Dog () 


















图 4-1 


function Dog() {} 
Dog.prototype = { 

aa: "aa", 

method: function() { 


= new Dog; 

= new Dog; 
console.log(a.aa === b.aa);//true 
console.log(a.method === b.method);//true 





一 般 地 ， 我 们 把 定义 在 原型 上 的 方法 叫 原型 方 


法 ， 它 为 所 有 实例 所 共享 。 这 有 好 处 也 有 坏处 ， 为 
了 实现 差异 化 ，JavaScript 人 允许 我 们 直接 在 构造 器 内 
指定 其 方法 ， 这 叫做 特权 方法 。 如 果 是 属性 ， 就 
叫 特权 属性 。 它 们 每 一 个 实例 束 是 一 个 副本 ， 各 不 
影响 。 因 此 我 们 通 弟 把 共享 的 用 于 操作 数据 的 方法 
放 在 原型 ， 把 私有 的 属性 放 在 特权 属性 中 。 但 放 于 
this 上 ， 还 是 能 让 人 任意 访问 到 ， 那 就 放 在 函数 体 
内 的 作用 域内 吧 。 这 时 它 就 成 为 名 副 其 实 的 私有 属 
性 。 
































function A() E 
var count = 0 
this.aa = "aa" 
this.method = Pe ey { 
return count 


} 
this.obj = {} 


} 

A. prototype = = { 
aa: "aa" 
method: function() { 
} 

}; 


var a = new A; 

var b = new A; 

console.log(a.aa === b.aa); //true 由 于 aa 的 值 为 基本 类 型 ,比较 值 
console.log(a.obj === b.obj);//false, 引用 类 型 ,每 次 进入 函数 体 都 重新 创 
建 ， 因 此 都 不 一 样 
console.log(a.method === b.method);//false 





























pO 


特权 方法 或 属性 只 是 遮 住 原型 方法 或 属性 ， 因 
此 只 要 删 掉 特 权 方 法 ， 就 又 能 访问 到 同名 的 原型 方 
法 或 属性 。 











当 访 问 一 个 对 象 的 属性 时 ，JavaScript 会 从 对 象 
本 喘 开 始 往 上 过 历 整个 原型 链 ， 直 到 找到 对 应 属性 
为 止 。 如 果 此 时 到 达 了 原型 链 的 项 部 ， 也 就 是 
Object.prototype， 仍 然 未 发 现 需 要 查找 的 属性 ， 那 
么 JavaScript 就 会 返回 undefined 值 。 


delete a.method; 
console.log(a.method === A.prototype.method);//true 








用 Java 的 语言 来 说， 原型 方法 与 特权 方法 都 属 
于 实例 方法 ， 在 Java 中 还 有 一 种 叫做 类 方法 与 类 属 
性 的 东西 。 它 们 用 JavaScript 来 模拟 也 非常 简单 ， 
直接 定义 在 函数 上 就 行 了 。 











A.method2 = function( ) 人 ;// 类 方法 
var c = new A; 
console. log(c.method2) ;//undefined 





接 下 来 ， 我 们 看 一 下 继承 的 实现 。 上 面 说 
过 ， 只 要 prototype 有 什么 东西 ， 它 的 实例 就 有 什么 
REA, ATK SPE ATTN, ES OR STON 
甚至 ， 我 们 将 这 个 prototype 对 象 置换 为 另 一 个 类 的 
原型 ， 这 个 对 象 都 能 轻而易举 得 到 那个 类 的 所 有 原 


型 成 员 。 











function A(){} 


} 
function B(){} 
B.prototype = A.prototype; 


var b= new B; 
console.log(b.aaa);//1; 
A.prototype.bbb = 2; 
console.log(b.bbb);//2; 











由 于 是 引用 相同 的 一 个 对 象 ， 这 意味 着 ， 如 果 
我 们 修改 A 类 的 原型 ， 也 等 同 于 修改 了 B 类 的 原 
型 。 因 此 我 们 不 能 把 一 个 对 象 赋 给 两 个 类 。 这 有 两 








种 办 法 : 方法 一 ， 通 过 for in 把 父 类 的 原型 成 员 逐 一 
Bea FIR, aes 子 类 的 原型 不 是 直接 由 
— 得 ， 先 将 此 父 类 的 原型 赋 给 一 个 函数 ， 然 后 
这 个 函数 的 实例 作为 子 类 的 原型 。 





ay 


WE, BAN ESE A mixin 这 样 的 方法 ， 
亦 有 书 称 之 为 找 贝 继承 ， 好 处 是 简单 直接 ， 坏 处 是 
无 法 通过 instanceof 验 证 。Prototype.js 的 extend 方 法 
HEAR Fk 








function extend(destination, source) { 
for(var property in source) 
destination[property] = source[property]; 


return destination; 


} 








方法 二 ， 就 在 原型 上 动脑 筋 ， 因 此 称 之 为 原型 
继承 。 下 面 是 个 范本 。 








A.prototype = { 
aa: function() { 
alert(1) 
} 
} 


function bridge() {}; 
bridge.prototype = A.prototype; 


function B() {} 

B.prototype = new bridge(); 
var a = new A; 

var b = new B; 

//false， 说 明成 功 分 开 它 们 的 原型 
console.log(A.prototype == B.prototype); 
//true, 子 类 共享 父 半 的 原型 方法 
console.log(a.aa === b.aa); 
// 为 父 类 动态 添加 新 的 原型 方法 
A.prototype.bb = function() { 

alert(2) 


























} 

//true， 孩 子 总 会 得 到 父亲 的 遗产 

console.log(a.bb === b.bb); 

B.prototype.cc = function() { 
alert(3) 





} 

//false， 但 父亲 未 必 有 机 会 看 到 孩子 的 新 产业 
console.log(a.cc === b.cc); 

// 并 且 它 能 正常 通过 JavaScript 自 带 验 证 机 制 一 jnstanceof 
console.log(b instanceof A);//true 
console.log(b instanceof B);//true 

















并 且 ， 方 法 二 能 se nent 现在 ES5 





束 内 置 了 这 种 方法 来 实现 原型 继承 ， 它 就 十 
Object.create。 ee ee 
下 面 的 代码 。 





Object.create = function (o) { 
function F() {} 
F.prototype = o0; 
return new F(); 


上 面 方法 ， 要 求 传 入 一 个 父 类 的 原型 作为 参 
数 ， 然 后 返回 子 类 的 原型 。 


不 过 ， 这 样 我 们 还 是 遗漏 了 一 点 东西 一 一 子 类 
不 只 是 继承 父 类 的 遗产 ， 还 拥有 自己 的 东西 。 此 
外 ， 原 型 继承 并 没有 让 子 类 继承 父 类 的 类 成 员 与 特 
DB. HER TAS Fonsi, HMR, 我 
们 可 以 通过 上 面 的 extend 方 法 ， 特 权 成 员 我 们 可 以 
在 子 类 的 构造 右 中 ， 通 过 apply 实 现 。 











function inherit(init, Parent, proto){ 
function Son(){ 
Parent.apply(this, argument); // 先 继承 父 类 的 特权 成 员 





init.apply(this,argument); // 再 执行 自己 的 构造 器 


} 

// 由 于 0bject.create 可 能 是 我 们 伪造 的 ， 因 此 避免 使 用 第 二 个 参数 
Son.prototype = Object.create(Parent.prototype, {}); 
Son.prototype.toString = Parent.prototype.toString;// 处 理 IE 

Bug 
Son.prototype.valueOf = Parent.prototype.value0f;// 处 理 IE Bu 

g 
Son.prototype.constructor = Son; // 确 保 构造 器 正常 指向 自身 ， 而 
















































































不 是 0bject 
extend(Son.prototype, proto); // 添 加 子 类 特有 的 原型 成 员 
extend(Son, Parent); // 继 承 父 类 的 类 成 员 


return Son; 


po 


下 面 我 们 做 一 组 实验 ， 测 试 一 下 实例 的 回调 机 
制 。 许 多 资料 都 说 ， 但 总 是 语 丰 不 详 。 当 我 们 访问 
对 象 的 一 个 属性 ， 那 么 它 先 找 其 特权 成 员 ， 如 果 有 
FIZIK, eA RRA, FRA, RHI 
原型 .…... 我 们 尝试 把 它 的 原型 临时 修改 一 下 ， 看 它 
的 属性 会 变 成 哪 一 个 ! 





function A() {} 
A.prototype = { 

aa: 1 
} 
var a = new A; 
console.log( a.aa);//1 
// 把 它 整 个 原型 对 象 都 换 掉 
A.prototype = { 

aa: 2 
} 
console.1lo0g(a.aa);//1， 表 示 不 受 影响 
// 于 是 我 们 想到 实例 都 有 一 个 constructor 方 法 ， 指 向 其 构造 器 ， 
// 而 构造 器 上 面 正 好 有 我 们 的 原型 ，JavaScript 引 擎 是 不 是 通过 该 路 线 回溯 属性 呢 
function B(){} 
B.prototype = { 

aa: 3 
} 
a.constructor = B; 
console.log( a.aa );//1 表示 不 受 影响 
































因此 类 的 实例 肯定 通过 另 一 条 通道 进行 回调 ， 
翻 看 ecma 规 范 可 知 每 一 个 对 象 都 有 一 个 内 部 属性 
[[Prototype]]， 它 保存 着 当 我 们 new 它 时 构造 器 所 引 
用 的 prototype 对 象 。 在 标准 浏览 占 与 E11 里 ， 它 们 
其 露 了 一 个 叫 _proto_ 属性 来 访问 它 。 因 此 只 要 
不 动 _proto”， 上 而 的 代码 怎么 动 ，a.aa 始 终 坚 定 
不 移 地 返回 1。 我 们 再 来 看 一 下 new 操 作 时 发 生 了 什 
么 事 。 


(1) 创建 一 个 空 对 象 instance。 


(2) instance. proto = 


instanceClass.prototype. 


C3) AS hie as ef 2 A TEI Athis = instance. 





(4) PUT Pa teas E TNS o 





(5) 判定 有 没有 返回 值 ， 如 果 有 ， 则 判定 返 


回 值 的 类 型 ， 如 果 类 型 为 Object, Array 等 复合 数据 
类 型 ， 就 返回 该 对 象 ， 人 否则 返回 this EP) 。 


于 是 有 了 下 面 结 末 。 


function A() { 
console.log(this.__proto__.aa); //1 
this.aa = 2 

} 

A.prototype = { 
aa: 1 


} 


var a = new A; 


console.log(a.aa); //2 
a.__proto__ = { 
aa: 3 




















} 
delete a.aa; // 删 掉 特 权 属 性 ， 暴 露 原 型 链 上 的 同名 属 
console.log(a.aa); //3 








有 了 __proto ， 我 们 可 以 将 原型 继承 设计 得 
更 简洁 。 我 们 还 是 拿 上 面 的 例子 改 一 下 来 进行 实 


W o 








function A() {} 
A.prototype = { 
aa: 1 


} 


function bridge() {}; 
bridge.prototype = A.prototype; 


function B() {} 

B.prototype = new bridge(); 
B.prototype.constructor = B; 
var b = new B; 

B.prototype.cc = function() { 





alert(3) 
} 
console.log(b.__proto__ == B.prototype); 
//true 这 个 大 家 应 该 都 没有 疑问 
console.log(b.__proto__.__proto__ === A.prototype); 








//true 得 到 父 类 的 原型 对 象 





为 什么 昵 ?” 因 为 b._proto _ .constructor 为 B， 





而 也 的 原型 是 从 bridge 中 得 来 的 ， 而 bridge. prototype 
= A.prototype。 反 过 来 ， 我 们 在 定义 时 ， 让 
B.prototype. proto = A.prototype， 就 能 轻松 实 
现 两 个 类 的 继承 。 


目前 ，__proto _ 属性 已 列 入 ES6， 因 此 可 以 
通过 if 分 文大 胆 使 用 它 。 


42 各 种 类 工 三 的 实现 


FH FJavaScriptż Brendan Eich“ 大 牛人 ”在 10 天 
之 内 发 明 ， 但 后 来 幼 上 过 上 浏览 器 大 战 ， 网 景 公司 
失势 ，JavaScript 的 后 期 改 民 升级 束 一 直 耽 误 了 。 
中 继承 的 遗留 问题 是 最 严重 的 一 个 。 当 我 们 要 复 用 
某 些 功 能 时 ， 第 一 个 反应 就 是 想到 继承 ， 然 后 才 是 
组 合 。 尽 管 Gof tL 再 三 重申 ， 组 合 优 于 继承 ， 但 继 
承 这 种 代码 复 用 手法 ， 在 绝 大 多 数 的 语言 直接 可 以 
使 用 类 来 实现 ， 而 组 合 则 需要 用 设计 模式 自己 搞 。 























由 于 JavaScript 没 有 实现 类 ， 先 行者 折腾 出 好 几 
种 实现 来 模拟 其 他 语言 的 类 (如 原型 链 继 承 、 构 造 
函数 继承 、 组 合 继承 、 寄 生 继 承 、 寄 生 组 合 继 
EK.) ， 它 们 都 各 有 优 务 。 但 我 们 将 这 些 创 建 类 
的 方法 封装 一 下 ， 供 别人 用 时 ， 就 需要 考虑 到 更 多 
功能 了 。 于 是 有 了 类 工厂 这 一 说 ， 这 个 工厂 专门 是 
用 来 制作 各 种 类 ， 然 后 通过 类 再 来 制造 我 们 实际 使 








用 的 实例 对 象 。 


由 于 主流 框架 的 类 工厂 实现 太 依赖 于 它们 庞杂 
的 工具 函数 ， 而 一 个 精巧 的 类 工厂 也 不 过 特 行 左 
右 ， 因 此 本 章 就 不 打算 罗列 Prototype.js、Mootools 
等 的 代码 了 ， 介 绍 男 外 一 些 不 太 出 名 但 相当 有 水 准 
的 小 库 吧 。 











4.2.1 ”相当 精巧 的 库 一 P.js 


这 是 一 个 相当 精巧 的 库 ， 尤 其 在 调用 父 类 的 同 
名 方法 时 ， 它 直接 把 父 类 的 原型 抛 在 你 眼前 ， 连 
_super 也 省 了 。 





它 的 源码 解读 如 下 。 





var P = (function(prototype, ownProperty, undefined) { 


function isObject(o) { 
return typeof o === 'object'; 


} 


function isFunction(f) { 
return typeof f === 'function'; 


function BareConstructor() {}; 


function P(_superclass /* = Object */ , definition) { 
// 如 果 只 传 一 个 参数 ， 没 有 指定 父 类 
if(definition === undefined) { 
definition = _superclass; 
_superclass = Object; 








} 
//C 为 我 们 要 返回 的 子 类 ，definition 中 的 ijnit 为 用 户 构造 器 





function C() { 
var self = new Bare; 
console.log(self.init) 
if(isFunction(self.init)) self.init.apply(self, arg 
uments); 
return self; 


} 


function Bare() { // 这 个 构造 器 是 为 了 让 C 不 用 new 就 能 返回 实例 而 设 
的 
} 
C.Bare = Bare; 
// 为 了 防止 改动 子 类 影响 到 父 类 ， 我 们 将 父 类 的 原型 赋 给 一 个 中 介 者 BareC 
onstructor 
// 然 后 再 将 这 中 介 者 的 实例 作为 子 类 的 原型 
var _super = BareConstructor[prototype] = _superclass[p 
rototype]; 
var proto = Bare[prototype] = C[prototype] = new BareCo 
nstructor; // 
// 然 后 C 与 Bare 都 共享 同一 个 原型 
// 最 后 修正 子 类 的 构造 器 指向 自 映 
proto.constructor = C; 
// 类 方法 mixin, Hitdef xt BH BES TILE A Bl A EA 
C.mixin = function(def) { 
Bare[prototype] = C[prototype] = P(C, def)[prototyp 
e]; //Bare[prototype] = 
return C; 
































} 
//definition 最 后 延迟 到 这 里 才 起 作用 
return(C.open = function(def) { 
var extensions = {}; 
//definition 有 两 种 形态 
// 如 果 是 函数 ， 那 么 子 类 原型 、 父 类 原型 、 子 类 构造 器 、 父 类 构造 传 











进去 ， 


// 如 果 是 对 象 则 直接 置 为 extensions 
if(isFunction(def)) { 
extensions = def.call(C, proto, _Super, C, _sup 
erclass); 
} else if(isObject(def)) { 
extensions = def; 








} 
// 最 后 混入 子 类 的 原型 中 
if(isObject(extensions)) { 
for(var ext in extensions) { 
if(ownProperty.call(extensions, ext)) { 
proto[ext] = extensions[ext]; 
} 
} 


+ 

// 确 保 ijnit 为 一 个 函数 
if(!isFunction(proto.init)) { 
proto.init = _superclass; 

















} 


return C; 
}) (definition); 





// 这 里 为 一 个 自动 执行 函数 表达 式 ， 相 当 于 

//C.open = function(){/*....*/} 
//C.open(definition) 

//return C; 

// 换 言 之 ， 返 回 的 子 类 存在 3 个 类 成 员 ，Base，mixin，open 


} 


return P; // 暴 露 到 全 局 
})('prototype', ({}).hasOwnProperty); 





我 们 答 试 创建 一 个 类 。 





var Animal = P(function(proto, superProro) { 
proto.init = function(name) { // 构 造 函 数 
this.name = name; 


}; 








proto.move = function(meters) { // 原 型 方法 
console.log(this.name + " moved " + meters + "m."); 


} 
}); 
var a = new Animal("aaa") 
var b = Animal("bbb");// 无 "new" 实 例 化 
a.move(1) 
b.move(2) 








此 外 ， 我 们 还 可 以 使 用 以 下 更 简洁 的 定 
To 


var Snake = P(Animal, function(snake, animal) { 

snake.init = function(name, eyes) { 
animal.init.call(this, arguments); // 调 用 父 类 构造 器 
this.eyes = 2; 

} 

snake.move = function() { 
console. togt slithering.: 
animal.move.call(this, ae Fass 父 类 的 同名 方法 





new Snake("snake", 1); 
s.move(); 
console.log(s.name); 
console.log(s.eyes); 








下 面 是 私有 属性 的 演示 ， 由 于 放 在 函数 体内 集 
中 定义 ， 因 此 安全 可 靠 


var Cobra = P(Snake, function(cobra) { 


var age = 1; // 私 有 属性 

// 这 里 还 可 以 编写 私有 方法 

cobra.glow = function() { //KX 
return aget+; 

















} 
}); 
var c = new Cobra("cobra"); 
console.log(c.glow()); //1 
console.log(c.glow()); //2 又 长 一 岁 
console.log(c.glow()); //3 又 长 一 岁 





此 外 它 还 提供 了 两 个 类 方法 ，mixin 用 于 再 次 





添加 新 的 原型 成 员 ，open 的 作用 同 mixin， 但 显然 它 
适合 于 重 写 父 类 的 方法 (在 子 类 方法 内 部 重用 父 类 
方法 ) ， 同 时 ， 也 可 以 添加 新 的 私有 属性 。open 这 
个 命名 显然 是 受 ruby 影 响 ， 意 为 重新 打开 类 ， 修 改 
其 原型 。 





4.2.2 JS.Class 


其 仓库 地 址 : 
https://github.com/RubyLouvre/JS.Class 





从 它 的 设计 来 看 ， 它 是 师承 Dean Edwards“ 大 


牛人 ”的 Base2， 相 似 的 类 工厂 实现 还 有 mootools 和 
第 4.2.3 节 的 simple-inheritance。 它 是 通过 父 类 构造 
器 的 extend 方 法 来 产生 上 自己 的 子 类 ， 里 面 存 在 一 个 
开关 ， 防 止 在 生成 类 时 无 意 执 行 construct 方 法 。 比 
如 Base2 的 base2._prototyping 和 mootools 的 
klass.$prototyping。 它 创建 子 类 时 ， 也 不 通过 中 间 
的 函数 来 断 开 双方 的 原型 链 ， 而 是 使 用 父 类 的 实例 
来 做 了 类 的 原型 ， 这 点 实现 得 非常 精巧 。 























源码 解读 如 下 。 





var JS = { 
VERSION: '2.2.1' 


}; 


JS.Class = function(classDefinition) { 





// 返 回 目标 类 的 真正 构造 器 
function getClassBase() { 
return function() { 
// 它 在 里 面 执行 用 户 传 入 的 构造 器 construct 
//preventJSBaseConstructorCall 是 为 了 防止 在 createClass 
Definition 辅 助 方法 中 执行 
// 父 类 的 construct 
if (typeof this['construct'] === 'function' && prev 
ent JSBaseConstructorCall 
=== false) { 
this.construct.apply(this, arguments); 














} 
// 为 目标 类 添加 类 成 员 与 原型 成 员 
function createClassDefinition(classDefinition) { 

// 此 对 象 用 于 保存 父 类 的 同名 方法 

var parent = this.prototype["parent"] || (this.prototyp 

e["parent"] = {}); 
for (var prop in classDefinition) { 
if (prop === 'statics') { 
for (var sprop in classDefinition.statics) { 
this[sprop] = classDefinition.statics[sprop 





} 
} else { 
// 为 目标 类 添加 原型 成 员 ， 如 果 是 函数 ， 那 么 检测 它 还 没有 同名 的 超 类 方法 ， 如 
果 有 则 进入 以 下 分 文 
if (typeof this.prototype[prop] === 'function' ) 
{ 














var parentMethod = this.prototype[prop]; 
parent[prop] = parentMethod; 


} 
this.prototype[prop] = classDefinition[prop]; 


} 

var preventJSBaseConstructorCall = true; 
var Base = getClassBase(); 

prevent JSBaseConstructorCall = false; 


createClassDefinition.call(Base, classDefinition); 





// 用 于 创建 当前 类 的 子 类 


Base.extend = function(classDefinition) { 


prevent JSBaseConstructorCall = true; 
var SonClass = getClassBase(); 
SonClass.prototype = new this();// 将 一 个 父 类 的 实例 当 作 子 类 的 








preventJSBaseConstructorCall = false; 


createClassDefinition.call(SonClass, classDefinition); 
SonClass.extend = this.extend; 


return SonClass; 


return Base; 


Ja 





创建 一 个 Animal 类 与 一 个 Dog 子 类 。 


var Animal = JS.Class({ 
construct: function(name) { 
this.name = name; 
ty 
shout: function(s) { 
console.log(s); 


} 
}); 


var animal = new Animal(); 
animal.shout('animal'); // animal 
var Dog = Animal.extend({ 
construct: function(name, age) { 
// 调 用 父 类 构造 器 


this.parent.construct.apply(this, arguments); 


this.age = age; 


: function(s) { 
console.log(s); 

} 
}); 
var dog = new Dog("dog", 4); 
console.log(dog.name); 
dog.shout("dog"); // dog 
dog.run("run"); // run 








演示 静态 成 员 的 实现 如 下 。 





var Shepherd = Dog.extend({ 











statics: { // 静 态 成 员 








TYPE: "Shepherd" 








run: function() { // 方 法 链 ， 调 用 超 类 同名 方法 
this.parent.run.call(this, "fast"); 
} 
}); 
console.log(Shepherd.TYPE); //Shepherd 
var shepherd = new Shepherd("shepherd", 5); 
shepherd.run(); //fast 





JS.Class 虽 然 功 能 稍微 注 弱 些 ， 但 简洁 得 惊 





人 。 我 们 可 以 在 它 的 基础 上 学 习 Base2 和 mootools 的 
实现 。 


4.2.3 simple-inheritance 


作者 为 大 名 易 易 的 John Resig ， 项 目 直接 放 在 
他 的 一 篇 博文 中 。 





特点 是 方法 链 的 实现 非常 优雅 ， 简 洁 ! 


源码 解读 如 下 。 





(function() { 
// /xyz/ .test(function(){xyz;}) 是 用 于 判定 函数 的 toString 是 否 能 暴 





露 里 面 的 实现 
// 因为 Function,prototype.toString 没 有 做 出 强制 规定 如 何 显示 自身 ， 

















根据 浏览 器 实现 而 定 
// 如 果 里 面 能 显示 内 部 内 容 ， 那 么 我 们 就 使 用 /Ab_super\b/ 来 检测 函数 里 面 
有 没有 .super 语 名 
// 当然 这 个 也 不 很 充分 ， 只 是 够 用 的 程度 ， 和 否则 就 返回 一 个 怎么 也 返回 true 的 














正则 
// 比如 一 些 古 老 版 本 的 Safari、Mobile 0pera 与 Blackberry 浏 览 器 ， 无 
法 显示 函数 体 的 内 容 
// 就 需要 用 到 后 面 的 正则 
var initializing = false, fnTest = /xyz/.test(function() { 
XYZ; 
}) ? /\b_super\b/ : /.*/; 











// 所 有 人 工 类 的 基 类 


this.Class = function() { 


}; 


// 这 是 用 于 生成 目标 类 的 子 类 
Class.extend = function(prop) { 
var _super = this,prototype;// 保 存 父 类 的 原型 











// 阻 止 init 被 触发 

initializing = true; 

var prototype = new this();// 创 建 子 类 的 原型 

// 重 新 打开 ， 方 便 真实 用 户 可 以 调用 init 

initializing = false; 

// 将 prop 里 的 东西 逐个 复 和 | 到 prototype， 如 果 是 函数 将 特殊 处 理 

// 因 为 复制 过 程 中 可 能 掩盖 了 超 类 的 同名 方法 ， CHEE E RE su 
per 的 字样 ， 就 笼统 地 

// 认 为 它 需 要 调用 父 类 的 同名 方法 ， 那 么 我 们 需要 重 写 当前 函数 

// 重 写 函 数 运用 了 闭 包 ， 因 此 fnTest 正 则 检测 可 以 减少 我 们 重 写 方法 的 个 




































































// 因 为 不 是 每 个 同名 函数 都 会 向 上 调用 父 类 方法 
for (var name in prop) { 
prototype[name] = typeof prop[name] === "function" 
&& 
typeof _super[name] === "function" && fnTes 


t.test(prop[name]) ? 
(function(name, fn) { 
return function() { 
var tmp = this._super;// 保 存 到 临时 变量 








// 当 我 们 调用 时 ， 才 匆匆 把 父 类 的 同方 法 宪 写 到 _sup 
er 里 

this._super = _super[name]; 

// 然 后 才 开 始 执 行当 前 方法 (这 时 里 面 的 this._sup 

















er 已 被 重 写 ) ， 得 到 想 要 的 效果 


nit 


}; 
HO; 


var ret = fn.apply(this, arguments); 
// 还 原 this._super 

this._super = tmp; 

// 返 回 结果 

return ret; 








J}; 
})(name, prop[name]) 
prop[name]; 


} 


// 这 是 目标 类 的 真实 构造 器 
function Class() { 


// 为 了 防止 在 生成 子 类 的 原型 (new this()) 时 触发 用 户 传 入 的 构造 器 i 











// 使 用 initializing 进 行 牵制 
if (!initializing && this.init) 
this.init.apply(this, arguments); 








} 


// 将 修改 好 的 原型 赋值 
Class.prototype = prototype; 























// 确保 原型 上 -constructor 正 确 指向 自身 
Class.prototype.constructor = Class; 














// 添 加 extend 类 方法 ， 生 于 生产 它 的 子 类 
Class.extend = arguments.callee; 


return Class; 





创建 一 个 Animal 类 与 一 个 Dog 子 类 。 





var Animal = Class.extend({ 
init: function(name) { 
this.name = name; 


ty 


shout: function(s) { 


console.log(s); 
} 
}); 
var animal = new Animal(); 
animal.shout('animal'); // animal 
var Dog = Animal.extend({ 
init: function(name, age) { 
// 调 用 父 类 构造 器 
this. _super.apply(this, arguments); 
this.age = age; 


run: function(s) { 
console.log(s); 

} 
}); 
var dog = new Dog("dog", 4); 
console.log(dog.name); //dog 
dog.shout("xxx"); // XXX 
dog.run("run"); // run 
console.log(dog instanceof Dog && dog instanceof Animal);//true 





顺便 一 提 ，simple-inheritance 的 老师 有 两 个 ， 
Base2 的 继承 系统 与 Prototype.js 的 方法 链 系 统 。 
Prototype.js 与 simple-inheritance 都 是 对 函数 toString 
进行 反 编 译 ， 看 里 面 有 没有 _super 或 $super 的 字眼 











才 决 定 是 否 重 写 。 不 同 的 是 Prototype.js 只 检测 方法 
的 参数 列表 ， 因 此 杂质 更 少 ， 更 加 可 徘 ! 





下 面 是 Prototype.js 方 法 链 演 示 。 





var Person = Class.create(); 
Person.prototype = { 
initialize: function(name) { 
this.name = name; 
ty 
say: function(message) { 
return this.name + ': ' + message; 


i 


var guy = new Person('Miro'); 
console.log(guy.say('hi')); // "Miro: hi" 
// 创 建 子 类 
var Pirate = Class.create(Person, { 

say: function($super, message) { // 注 意 这 里 的 传 参 ，$super 为 超 类 的 
同名 方法 

return $super (message) +"，yarr!"; // 这 需要 外 科 手 术 般 的 闭 包 来 实 

现 











}); 


var john = new Pirate('Long John'); 
console.log(john.say('good bye')) //Long John: good bye, yarr! 





“47K Prototype.jsix te MA MRR, SRE CAT 
与 使 用 时 的 参数 不 一 样 。 对 于 大 多 数 用 户 来 说 ， 实 
现 并 不 是 他 们 所 关心 的 ， 保 持 人 简洁 优雅 的 接口 才 是 
重点 。 如 果 翻 看 jQuery UI 的 源码 会 发 现 ， 它 的 
widget 类 工厂 已 经 把 方法 链 设 计 得 登 峰 造 顶 了 。 它 
会 在 函数 的 this 对 象 添加 两 个 临时 方法 ，_super 相 当 
于 simple-inheritance 的 _super， 它 的 参数 需要 用 户 逐 


个 转手 传递 ; _superApply 是 _super 的 强化 版 ， 因 为 
如 果 外 围 方法 是 不 确定 的 ， 那 么 你 也 没 法 为 super 
传 参 ， 因 此 它 只 需 用 户 丢 个 arguments 对 象 进去 ! 





4.2.4 体现 JavaScript 灵 活性 的 库 一 
def.js 


其 仓库 地 址 : 
https://github.com/RubyLouvre/def.js 


如 果 有 什么 库 最 能 体现 JavaScript 的 灵活 性 ， 此 
库 肯 定名 列 前 芒 。 它 试图 在 形式 上 模拟 Ruby 那 种 继 
承 ， 让 学 过 Ruby 的 人 一 眼 束 看 到 哪个 是 父 类 ， 哪 个 


是 子 类 。 











下 面 就 是 Ruby 的 继承 示例 。 


class Child < Father 


end 


def.js 能 做 如 下 这 个 程度 


def ("Animal") ({ 
init: function(name) { 
this.name = name; 
ty 
speak: function(text) { 
console.log("this is a " + this.name); 
} 
}); 


var animal = new Animal("Animal"); 
console.log(animal.name) 


def ("Dog") < Animal({ 
init: function(name, age) { 
this._super(); // 魔 术 般 地 调用 父 类 
this.age = age; 
ty 
run: function(s) { 
console.log(s) 


} 
}); 
var dog = new Dog("wangwang"); 
console.log(dog.name); //wangwang 





// 在 命名 空间 对 象 上 创建 子 类 
var namespace = {} 
def(namespace, "Shepherd") < Dog({ 
init: function() { 
this._super(); 
} 
}); 


var shepherd = new namespace.Shepherd("Shepherd" ) 
console.log(shepherd.name); 





由 于 涉及 的 魔术 比较 多 ， 我 逐个 分 解 一 下 。 


Vaan 


第 一 个 是 curry 的 运用 , fEdef("Animal") 之 
后 它 还 能 直接 添加 括号 ， 说 明 它 是 一 个 函数 。 而 此 
时 真正 的 类 已 经 创建 出 来 ，window.Animal 吏 访问 

到 这 个 类 。 





第 二 个 是 使 用 < 运算 符 对 valueOf 的 劫持 。 其 
实 原 项 目 是 用 &1t;&1t; ， 不 过 换 成 + 、 一 也 行 ， 
但 要 保证 与 Ruby 的 拟态 ， 我 还 是 推荐 用 &1t; 
。&1t; 操作 符 的 目的 是 强制 两 边 计算 自身 ， 从 而 调 
用 自己 的 valueof 方法 。def.js 就 是 通过 重 写 了 父 类 
与 子 类 定义 的 valueOf 实 现在 某 个 作用 域 中 偷偷 地 进 
行 原型 继承 ， 如 图 4-2 所 示 。 











3 | 清除 Gh Oe | 所 有 | BR SS BES 调试 信息 Cookies 
var a = {valueOf:function() { console. log(“aaa. . . function () { le. 1 


aaaaaaa 


图 4-2 


var a = {valueOf:function(){ 
console. log("aaaaaaa" ) 

3}, b = {valueOf:function(){ 
console. log("bbbbbbb" ) 





由 于 操作 符 两 边 部 是 函数 ， 那 么 我 们 能 做 更 多 
的 事 ! 


function def(name) { 
console.log("def(" + name + ") called") 
var obj = { 
valueOf: function() { 
console.log(name + " (valueOf)") 
} 
} 


return obj 


} 
def("Dog") < def("Animal"); 








第 三 个 是 arguments.callee.caller 的 运用 。 大 家 
看 一 下 Dog 的 构造 冰 数 ， 里 面 只 有 一 句 
this. super()， 没 有 传 参 ， 但 它 依 然 能 调用 到 它 的 父 
类 构造 器 ， 并 把 arguments 塞 进 


去 。 ee Wt xe ta _superix eh BL, 
callersizeinitx SKA, Aa BA E 
caller.arguments ， 就 得 到 "wangwang" 这 个 传 参 

了 。 因 此 _super 比 simple-inheritance 知 能 多 了 ， 就 像 
Java 的 super 关 键 字 那样 ， 摊 在 那里 自行 干 活 。 同 时 
_Super 不 但 能 自动 调用 父 类 的 构造 器 ， 同 名 超 关 方 
法 的 实现 也 由 它 一 手打 包 








下 面 是 源码 解读 。 





Pune tron grove.) { 








上 [È 


//deferred 是 整个 库 中 最 重要 的 构件 ， 扮 演 3 个 角 

//1 def("Animal") 时 就 是 返回 deferred， 此 时 我 们 可 以 直接 接 括号 对 原型 进行 
扩展 

//2 在 继承 父 类 时 < 触发 两 者 调用 value0f， 此 时 会 执行 deferred.valueof 里 
面 的 逻辑 

//3 在 继承 父 类 时 ， 父 类 的 后 面 还 可 以 接 括 号 〈 废 话 ， 此 时 构造 器 当 普 通 函数 使 用 

> 当 作 传送 器 ， 
/7 保存 着 父 类 与 扩展 包 到 _super,_props 


var deferred; 
































function extend(source) { // 扩 展 自 定义 类 的 原型 
var prop, target = this.prototype; 





for(var key in source) 
if(source.hasOwnProperty(key)) { 
prop = target[key] = source[key]; 
if('function' == typeof prop) { 
// 在 每 个 原型 方法 上 添加 两 个 目 定 义 属 性 ， 保存 其 名 字 与 当前 类 
prop._name = key; 
prop. class = this; 




















} 
} 


return this; 











} 
// 一 个 中 介 者 ， 用 于 切断 子 类 与 父 类 的 原型 连接 
// 它 会 像 DVD+R 光 盘 那 样 被 反复 擦 写 








function Subclass() {} 


function base() { 
// 取得 调用 this,_super() 这 个 函数 本 身 ， 如 果 是 在 init 内 ， 那 么 就 是 当前 





类 
入 

//http://larryzhao.com/blog/arguments-dot-callee-dot-caller 
-bug-in-internet-explorer-9/ 

var caller = base.caller; 

m // 执 行 父 类 的 同名 方法 ， 有 两 种 形式 ， 一 是 用 户 自 己 传 ， 二 是 智能 取 当 前 函数 的 

HH 

return caller. class. _super.prototype[caller. name].apply(t 
his, arguments.length ? 

arguments : caller.arguments); 


} 











function def(context, klassName) { 
klassName || (klassName = context, context = global); 
// 偷 偷 在 给 定 的 全 局 作用 域 或 某 对 象 上 创建 一 个 类 
var Klass = context[klassName] = function Klass() { 
if(context != this) { // 如 果 不 使 用 new 操作 符 ， 大 多 数 情况 下 co 
ntext 与 this 都 为 vindow 
return this.init && this.init.apply(this, arguments); 

















} 

// 实 现 继承 的 第 二 步 ， 让 渡 自 身 与 扩展 包 到 deferred 
deferred._super Klass; 

deferred._props arguments[0O] || {}; 


} 


// 让 所 有 自 定义 类 都 共用 同一 个 extend 方 法 
Klass.extend = extend; 

















// 实 现 继承 的 第 一 步 ， 重 写 deferred， 告 一 看 是 刚刚 生成 的 自 定义 类 的 扩展 函 


deferred = function(props) { 
return Klass.extend(props); 


}; 





// 实现 继承 的 第 三 步 ， 重 写 value0f， 方便 在 def("Dog") < Animal({}) iH 
deferred.valueOf = function() { 
var Superclass = deferred._ super; 


if(!Superclass) { 
return Klass; 








} 
// 先 将 父 类 的 原型 赋 给 中 介 者 ， 然 后 再 将 中 介 者 的 实例 作为 子 类 的 原型 
Subclass.prototype = Superclass.prototype; 
var proto = Klass.prototype = new Subclass; 
// 引用 自身 与 父 类 
Klass._class = Klass; 
Klass._super = Superclass; 
// 一 个 小 甜点 ， 方 便 人 们 知道 这 个 类 叫 什 么 名 字 
Klass.toString = function() { 
return klassName; 














// 强 逼 原型 中 的 constructor 指 向 自身 

proto.constructor = Klass; 

// 让 所 有 自 定 义 类 都 共用 这 个 base 方 法 ， 它 是 构成 方法 链 的 关系 
proto, Super = base; 

// 最 后 把 父 类 后 来 传 入 的 扩展 包 混 入 子 类 的 原型 中 


deferred(deferred._props); 


























J}; 
return deferred; 
} 
global.def = def; 
}(this)); 





它 的 实现 非 第 巧妙 。 这 要 对 def(“Dog”) < 
Animal({}) 这 一 行 的 代码 各 个 部 分 的 执行 顺序 有 充 
分 的 了 解 。 无 疑 左 边 的 def 会 先 执 行 ， 重 新 擦 写 了 


deferred 与 deferred.valueOf。 然 后 是 父 类 Animal 作 为 
普通 函数 接受 子 类 的 扩展 包 ， 扩 展 包 与 父 类 也 在 这 
时 偷偷 附加 到 deferred 上。 最 后 是 中 间 的 操作 符 触 
发 deferred.valueOf， 完 成 继承 ! 

















当然 也 有 美中不足 的 地 方 ， 束 是 利用 了 caller 这 
个 被 废弃 的 属性 。 在 ES5 的 严格 模式 下 ， 它 是 不 可 
用 的 ， 会 导致 继承 系统 瘫痪 ! 这 个 修改 也 很 简单 ， 
直接 参考 jQuery UI 的 那 部 分 束 行 了 ， 只 是 少 了 一 些 
智能 化 。 








4.3 ”进击 的 属性 插 述 符 


ES5 最 瞩目 的 升级 是 为 对 象 引 入 属性 摘 述 符 ， 
RT PT A OE. FEW, R 
们 知道 原生 对 象 的 东 些 属性 不 能 删除 或 过 历 ， 但 不 
能 深 完 下 去 ， 也 无 法 改变 什么 。 现 在 属性 描述 符 给 
了 我 们 一 个 完整 的 答案 ， 并 且 能 让 我 们 用 它 做 更 多 
的 事情 ， 如 实现 不 可 变 对 象 或 者 实现 avalon 这 样 共 
A SUA) SB E REJI vm Xf Ze o 

















属性 描述 符 让 我 们 对 属性 有 了 更 精细 的 控制 ， 
比如 说 这 个 属性 是 否 可 以 修改 、 是 人 否 可 以 在 for in 
环 中 枚 举 出 来 、 是 否 可 以 删除 。 这 些 新 增 的 API 都 
集中 定义 在 Object 下 ， 基 本 上 除了 Object.keys 这 个 
方法 外 ， 旧 版 本 正 都 无 法 模拟 其 他 新 API。 








Object 下 总 供 添 加 以 下 几 种 新 方法 。 


Object.keys 


Object.getOwnProperty Names 
e Object.getPrototypeOf 

e Object.defineProperty 

e Object.defineProperties 

e Object.getOwnPropertyDescriptor 
e Object.create 

e Object.seal 

e Object.freeze 

e Object.preventExtensions 

e Object.isSealed 

e Object.isFrozen * 


e Object.isExtensible 


其 中 除 Object.keys 外 ， 旧 版 本 IE 都 无 法 模拟 这 
些 新 API。 旧 版式 的 标准 浏览 器 ， 可 以 用 _proto 
实现 Object.getPrototypeOf ， 结 


合 _defineGetter 与 _defineSetter 来 模拟 


Object.defineProperty . 


Object.keys a e eae 
(不 包括 原型 链 上 的 ) ， 以 数组 形式 返回 。 这 个 我 
在 第 2 章 中 已 经 给 出 兼容 函数 。 








Object.getOwnPropertyNames 用 于 ae 4 
MARA HY S B EBS aa JE CA 
E> ， 以 数组 形式 返回 





var obj = { 
aa: 1, 
toString: function() { 
return "1" 


} 


} 
if(Object.defineProperty && Object.seal) { 
Object.defineProperty(obj, "name", { 
value: 2 
}) 
} 
console.1log(Object.getOwnPropertyNames(obj));//["aa", "toString 
Ea "name" | 
console.log(Object.keys(obj));//["aa", "toString" ] 


function fn(aa, bb) {}; 

console. log(Object.getOwnPropertyNames(fn));//[ "prototype", "len 
gth", "name", "arguments", "caller" ] 
console.log(Object.keys(fn));//[] 

var reg = /\w{2, }/1 


console. log(Object.getOwnPropertyNames(reg));//["lastIndex", "so 
urce", "global", "ignoreCase","mnitiline", "sticky" ] 


console.log(Object.keys(reg));//[] 


Object.getPrototypeOf 人 返回 参数 对 象 的 内 部 属 
性 [[Prototype]] ， 它 在 标准 浏览 器 中 一 直 使 用 一 
个 私有 属性 proto 获取 (IE9、IE10 和 Opera 没 
Fis 





需要 补充 一 下 ，Object 的 新 API〈 除 了 
Object.create) 有 个 统一 的 规定 ， 要 求 第 一 个 参数 
不 能 为 数字 、 字 符 串 、 布 尔 、null、undefined 这 五 
种 的 字面 量 ， 人 否则 抛 出 一 个 TypeError 异 名 。 











console.log(Object.getPrototypeOf(function() {}) == Function.pr 
ototype); //true 
console.log(Object.getPrototypeOf({}) === Object.prototype); // 


true 











Object.defineProperty 骏 露 了 属性 描述 的 接口 ， 
之 前 许多 内 建 属性 都 是 CI ZEK BER 
作 。 比 如 说 for in 循 环 为 何不 能 授 历 出 函数 的 


arguments. length. name jE 747%, delete 
window.a 为 何 返回 false， 这 些 现 RTA TARE 
共 涉 及 6 个 可 组 合 的 配置 项 : 是 否 可 重 与 
writable; 当前 值 value; 谈 取 时 内 部 调用 的 函数 
get; 写 入 时 内 部 调用 函数 set; 有 是否 可 以 迪 历 
enumerable; 是 人 否 可 让 人 家 再 次 改动 这 些 配 置 项 
configurable. 比如 我 们 随便 写 个 对 象 : 





var obj = {x:1}; 


有 了 属性 描述 符 ， 我 们 惑 清楚 它 在 底下 做 的 更 
多 细 市 ， 它 相当 于 以 下 ES5 代 码 : 


var obj = Object.create(Object.prototype, 
{x:{ 
value : 1, 
writable : true, 
enumerable : true, 
configurable : true 


t} 


) 





如 果 对 比 ES3 与 ES5， 就 很 快 明白 ， 曾 经 的 


[[ReadOnly]]. [[DontEnum]]. [[DontDelete]]2c#@ hK 
[[Writable]]. [[Enumerable]]. [[Configurable]] 了 . 


这 6 个 配置 项 将 原 有 的 本 地 属性 拆 分 为 两 组 ， 
数据 属性 与 访问 器 属性 。 我 们 之 前 的 方法 可 以 像 数 
据 属 性 那样 定义 ， 如 图 4-3 所 示 。 





图 4-3 


ES3 时 代 ， 我 们 目 定 义 类 的 属性 可 以 统统 看 作 
是 数据 属性 。 


像 DOM 中 的 元 素 贡 点 的 innerHTML、 
innerText、cssText， 数 组 的 langt 则 可 J4 Avy ial as 
属性 ， 对 它们 赋值 时 不 是 单纯 的 赋值 ， 还 会 引发 元 
素 其 他 功能 的 触 友 ， 而 取 值 也 不 一 定 直接 返回 我 们 
之 前 给 予 的 值 。 





var obj = {}; 
Object. ee ree "a", { 


value: 
P “true, 


enumerable: true, 
configurable: true 


}); 


console.log(obj.a);//37 
obj.a = 40; 
console.log(obj.a);//40 
var name = "xxx" 
for(var i in obj){ 

name = i 


console.log(name);//a 


Object.defineProperty(obj, "a", { 
value: 55, 
writable: false, 
enumerable: false, 
configurable: true 


}); 


console.log(obj.a);//55 
obj.a = 50; 
console.log(obj.a);//55 
name = "b"; 
for(var i in obj){ 

name = i 


console.log(name);//b 


var value = "RubyLouvre"; 
Object.defineProperty(obj, "b", { 
set: function(a){ 
value = a; 
ty 
get: function(){ 
return value + "!" 


} 
}); 


console.log(obj.b);//RubyLouvre! 
obj.b = "bbb"; 
console.log(obj.b);//bbb! 


var obj = Object.defineProperty( {} , 'a', { 
value: "aaa" 


}); 
delete obj.a;//configurable 默 认为 false， 此 属性 不 能 删除 
console.log(obj.a);//aaa 








var arr = []; 

// 添 加 一 个 属性 ， 但 上 % 量 ， 它 又 会 作为 数组 的 第 一 个 元 素 
Object.defineProperty(arr, '9', {value : "2"}); 
Object.defineProperty(arr, '‘length', {value : 10}); 
// 删 除 第 一 个 元 素 ， 但 由 于 length 的 writable 在 上 面 被 我 们 设置 为 false( 不 写 默认 















































为 false)， 因 此 改 不 了 。 

arr.length = 0 ; 

alert([arr,LIength，arr[9]]);// 正 确 应 该 输出 "1， 零 " 

//IE9、IE10: "1, 零 " 

//Firefox4~Firefox19: 抛 内 部 错误 ， 说 当前 不 支持 定义 jength 属 性 
//Safari5.0.1: "0,，"， 第 二 值 应 该 是 undefined， 说 明 它 忽略 了 writable 为 fa 
lse 的 默认 设置 ， 让 arr， length 把 第 一 个 元 素 删 反 了 

//Chrome14-: "9, 零 "， 估 计 后 面 的 " 零 " 是 作为 属性 打印 出 来 ，chrome24 与 标准 保 
持 一 致 。 












































此 外 ，defineProperty 的 第 三 个 参数 配置 对 象 好 
像 没 有 使 用 hasOwnProperty 进 行 取 值 ， 导 致 一 旦 
Object.prototype 被 污染 ， 束 很 容易 程序 骨 误 。 这 情 
况 好 像 所 有 现代 浏览 器 都 遇 到 了 。 





Object.prototype.set = undefined 

var obj = {}; 

Object.defineProperty(obj, "aaa", { value: "OK" }); 
//TypeError: property descriptor's getter field is neither unde 


fined nor a function 





Object.prototype.get = function(){}; 

var obj = {}; 

Object.defineProperty(obj, "aaa", { value: "OK" }); 
//TypeError: property descriptors must not specify a value or b 
e writable when a getter or setter has been specified 








如 果真 的 碰巧 让 你 撞 上 这 事 ， 唯 有 目 力 更 生 
To 








function hasOwn(obj, key) { 
return Object.prototype.hasOwnProperty.call(obj, key); 


function defineProperty(obj, key, desc) { 
// 创 建 一 个 纯 空 对 象 ， 不 继承 0bject prototype， 跳 过 那些 粗糙 的 for in 遍历 BUG 
var d = Object.create(null); 
d.configurable = hasOwn(desc, "configurable"); 
d.enumerable = hasOwn(desc, "“enumrable"); 
if (hasOwn(desc, "value")) { 
d.writable = hasOwn(desc, "writable") 
d.value = desc.value; 











} else { 
d.get = hasOwn(desc, "get") ? desc.get : undefined; 
d.set = hasOwn(desc, "set") ? desc.set : undefined; 
} 


return Object.defineProperty(obj, key, d); 


} 
var obj = {}; 
defineProperty(obj, "aaa", { value: "OK" });//save! 


[L SCR 


在 标准 浏览 右 中 ， 如 果 不 文 持 
Object.defineProperty， 我 们 可 以 揭 强 模拟 它 出 来 。 





if(typeof Object.defineProperty!=='function' ){ 
Object.defineProperty = function(obj, prop, desc) { 
if ('value' in desc) { 
obj[prop] = desc.value; 


} 
if ('get' in desc) { 
obj.__defineGetter__(prop, desc.get); 


if ('set' in desc) { 
obj.__defineSetter__(prop, desc.set); 


return obj; 





Object.defineProperties 就 是 
Object.defineProperty 的 加 强 版 ， 它 能 一 下 子 处 理 多 
个 属性 。 因 此 如 果 你 能 模拟 Object.defineProperty， 


它 束 不 是 问题 。 





if(typeof Object.defineProperties!=='function' ){ 
Object.defineProperties = function(obj, descs) { 
for (var prop in descs) { 
if (descs.hasOwnProperty(prop)) { 
Object.defineProperty(obj, prop, descs[prop]); 


} 


} 


return obj; 


}; 





使 用 示例 : 


var obj = {}; 
Object.defineProperties(obj, { 
"value": { 
value: true, 
writable: false 
F: 
" ame": { 
value: "John", 
writable: false 
} 
}); 
var a = 1; 
for(var p in obj) { 
a=), 


console.log(a);//1 





Object.getOwnPropertyDescriptor 是 用 于 获得 
某 对 象 的 本 地 属性 的 配置 对 象 ， 其 中 configurable、 
enumerable 肯 定 包 含 其 中 ， 视 情况 再 包含 value、 


writable 或 set、 get. 


var obj = {},=value = 0 





Object.defineProperty(obj, "aaa", { 
set: function(a) { 
value = a; 
ty 
get: function() { 
return value 


} 
}); 
// 一 个 包含 set， get, configurable, enumerable šj% 
console.log(Object.getOwnPropertyDescriptor(obj, "aaa")); 
console.log(typeof obj.aaa);//number 
console.log(obj .hasOwnProperty("aaa"));//true 


(function() { 

//—-**lGvalue, writable, configurable, enumerablenyxwt& 
console.log(Object.getOwnPropertyDescriptor(arguments, "lengt 

h")) 

})(1, 2, 3); 





由 于 属性 在 现代 浏览 器 划分 两 阵营 了 ， 如 果 我 
们 想 把 一 个 对 象 的 成 员 帕 给 另 一 个 对 象 ， 原 来 的 
mixin 就 会 捉襟见肘 。 这 时 


Object.getOwnPropertyDescriptor ik EHH T - 





function mixin(receiver, supplier) { 
if (Object.getOwnPropertyDescriptor) { 
Object.keys(supplier).forEach(function(property) { 
Object.defineProperty(receiver, property, Object.ge 
tOwnPropertyDescriptor (supplier, property)); 
}); 


for (var property in supplier) { 
if (supplier.hasOwnProperty(property)) { 
receiver[property] = supplier[property]; 


} 


Object.create 用 于 创建 一 个 子 类 的 原型 ， 
个 参数 为 父 类 的 原型 ， cle aie i 的 
属性 的 配置 对 象 。 如 果 我 们 能 模拟 
Object.defineProperties， 它 也 能 模拟 得 到 。 


if(typeof Object.create !== 'function') { 
Object.create = function(prototype, descs) { 
function F() {} 
F.prototype = prototype; 
var obj = new F(); 
if(descs != null) { 
Object.defineProperties(obj, descs); 


return obj; 








XP APIN HL, FSA HARE ER 
一 一 预示 Se ae 早期 失败 的 设计 。 
在 JavaScript 中 ， 每 函数 都 可 以 当 作 构造 函数 ， 
所 以 我 们 需要 区 分 普 hon 数 调 用 和 构造 函数 调 





FA; 我 们 一 般 使 用 new 关键 字 来 进行 区 别 。 然 而 ， 
这 样 承 破坏 了 JavaScript 中 的 函数 式 特 点 ， 因 为 new 
是 一 个 关键 字 而 不 是 函数 。 因 而 函数 式 的 特点 无 法 
和 对 象 实例 化 一 起 使 用 。 此 外 ，new KBE SAH ST 
JavaScript 中 真正 的 原型 继承 ， 使 得 它 更 像 是 基于 类 
的 继承 。 束 像 Raynos 说 的 : new 是 JavaScript 为 了 获 
得 流行 度 而 加 入 与 Java 类 似 的 语法 时 期 留 下 来 的 一 
个 残留 物 ，JavaScript 是 一 个 源 于 Self 的 基于 原型 的 
语言 。 然 而 ， 为 了 市 场 需求 ，Brendan Eich 把 它 当 
成 Java 的 小 兄 轴 推出 。 并 且 我 们 当时 把 JavaScript 当 
成 Java 的 一 个 小 兄弟 ， 残 像 在 微软 语言 家 寿 中 
Visual Basic 相 对 于 C++ 一 样 。 





这 个 设计 决策 导致 了 new 的 问题 。 当 人 们 看 到 
JavaScript 中 的 new 关 键 字 ， 他 们 就 想到 类 ， 然 后 当 
他 们 使 用 继承 时 束 傻 了。 就 像 Douglas Crockford, 
的 : 这 个 间接 的 行为 是 为 了 使 传统 的 程序 员 对 这 门 
语言 更 熟悉 ， 但 是 却 失 败 了 ， 束 像 我 们 看 到 的 很 少 


有 Java 程 序 员 选择 了 JavaScript。JavaScript 的 构造 模 
NFRA WIMMERA, Efim J JavaScript 
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高 效 的 使 用 这 门 语言 。 








Object.create 的 出 现 ， 人 多 许 我 们 从 零 开 始 创 建 
一 个 对 象 ， 像 下 面 这 样 。 


var object = Object.create(null) ; 


这 种 对 象 ， 我 们 称 之 为 纯 空 对 象 。 没 有 
toString， 也 没有 valueOf， 空 空荡荡 的 ， 在 
Object.prototype 锌 污染 或 极 震 市 省 内 存 的 情况 下 让 
第 有 用 。 它 是 一 种 超 轻 量 的 JavaScript 对 象 。 在 
firebug 下 ， 它 与 普通 JavaScript 对 象 是 以 不 同 的 形式 
来 表示 ， 如 图 4-4 所 示 。 








(Ð { } 
Object { } 
0 i} 


[ ] 


图 4-4 


Object.create 也 能 让 我 们 基于 某 个 现 有 的 对 
象 ， 创 建 一 个 新 对 象 。 这 种 行为 ， 我 们 又 称 之 为 创 
TR . 


function Animal(name) { 
this.name = name 
} 


Animal.prototype.getName = function() { 
return this.name; 
} 


function Dog(name, age) { 
Animal.call(this, name); 
this.age = age; 
} 
Dog.prototype = Object.create(Animal.prototype, { 
getAge: { 
value: function() { 
return this.age; 
} 
}, 
setAge: { 
value: function(age) { 
this.age = age; 


var dog = new Dog("dog", 4); 
console.log(dog.name) ;//dog 
dog.setAge(6); 
console.log(dog.getAge());//6 





Object.preventExtensions ， 它 是 3 个 封锁 对 象 
中 修改 的 API 中 程度 最 轻 的 那个 ， 就 是 阻止 添加 本 
地 属性 ， 不 过 如 采 本 地 属性 被 删除 了 ， 也 无 法 再 加 
回来 。 以 前 JavaScript 对 象 的 属性 都 是 随意 添加 、 删 
除 、 修 改 其 值 ， 如 采 它 的 原型 改动 ， 我 们 访问 它 还 
会 有 “意外 之 言 ”。 








Object.preventExtensions(a) 
a.bb = 2; 
console. log(a, bb); //undefined 添加 本 地 属性 失败 








//3 人 允许 它 修改 原 有 属性 
//undefined 但 允许 它 删除 已 有 属性 














Object.prototype.ccc = 4; 

console. > ccc); //4 不 能 阻止 它 增 添 原型 属性 
a.aa = 

ae log(a. bb); //undefined 














Object.seal [(Object.preventExtensions 更 过 
ay, EAEAIR OA ASME. A BBS EN i Ae he 
历 一 下 ， 把 每 个 本 地 属性 的 configurable 改 为 false。 


vara= { 





aa . "3a" 











}; 

Object.seal(a) 

a.bb = 2; 

console.log(a.bb); //undefined 添加 本 地 属性 失败 
aaa = 3; 

console.log(a.aa); //3 ”允许 它 修改 已 有 属性 
delete a.aa; 

console.log(a.aa); //3 但 不 允许 它 删 除 已 有 属性 











Object.freeze 无 疑 是 最 专制 的 《因此 有 人 说 过 
程式 程序 很 专制 ，OO 程 序 则 目 由 些 ， 显 然 道 格拉 
斯 主导 的 ECMA262V5 想 把 JavaScript 引 向 前 者 ) ， 
它 连 原 有 本 地 属性 也 不 让 修改 了 。 内 部 实现 就 是 所 
历 一 下 ， 把 每 个 本 地 属性 的 writable 也 改 为 false。 











vara= { 

aa: "aa" 
}; 
Object .freeze(al) 
a.bb = 2; 
console.log(a.bb); //undefined 添加 本 地 属性 失败 
a.aa = 3; 
console.log(a.aa); //aa ”人 允许 它 修改 己 有 属性 
delete a.aa; 
console.log(a.aa); //aa 但 不 允许 它 删 除 已 有 属性 














Object.isExtensible(object); 
Object.isSealed(object); 
Object.isFrozen(object); 





判定 一 个 对 象 是 否 被 锁定 。 锁 定 ， 童 味 厦 无 法 
扩展 。 如 果 一 个 对 象 被 浆 结 了 ， 它 肯定 被 锁 定 ， 也 
肯定 无 法 扩展 新 本 地 属性 了 。 


44 ARRE 


ES6 中 的 Classes 是 在 JavaScript 现 有 的 原型 继承 
的 基础 上 引入 的 一 种 “语法 糖 ?"。Class 语 法 并 没有 引 
入 一 种 新 的 继承 模式 。 它 为 对 象 创建 和 继承 提供 了 
更 清晰 、 易 用 的 语法 。 并 且 ， 有 了 上 自 市 的 原生 类 ， 
我 们 就 不 需要 用 五 花 八 门 的 方式 来 模拟 类 ， 在 代码 
维护 上 是 不 可 估量 的 ! 如 图 4-5 和 图 4-6 所 示 。 








JavaScript 目 从 被 网 景 发 明 后 ， 为 了 维护 其 正统 
性 ， 它 将 JavaScript 提 交 给 ECMA 委 员 会 来 负责 标准 
化 。 由 于 刚好 是 第 262 号 标准 ， 所 以 便 叫 做 
ECMA262。 又 因为 Java 的 版 权 在 Java 的 公司 Sun 手 
里 面 ， 便 指使 ECMA 将 JavaScript 的 正式 名 称 改 为 
ECMAScript， 简 称 ES。 


1999 和 年， 制定 了 ES3 的 规范 ， 将 近 10 年 时 间 语 
言 层面 没有 大 的 改动 。 而 到 了 2008 年 结尾 ， 筹 划 了 


好 和 久 的 ES4 由 于 加 入 改动 过 大 ， 没 有 成 功 。 于 是 删 
删 减 减 ， 推 出 了 更 少 改动 ， 更 友好 的 ES5。 


2011 年 对 ES5 进 修了 一 次 修订 ， 一 直到 2015 年 6 
月 ，ES6 的 规范 发 布 了 ， 并 规定 以 后 的 ES 规范 以 年 
份 命名 ， 每 年 发 布 一 个 小 版 本 ， 再 不 会 像 ES6 一 下 
发 布 很 多 功能 了 ， 如 图 4-7 所 示 。 
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图 4-7 


在 ES6 中 ， 我 们 统一 用 class 关 键 字 来 创建 一 个 
类 ，constructor 关 键 字 定义 构造 函数 ， 用 extends 关 
键 字 来 实现 继承 ，super 来 实现 调用 父 类 方法 。 





我 们 先 对 比 一 下 ES3 与 ES6 是 如 何 实 现 一 个 类 
的 。 





function Point(x,y){ 
this.x = x; 
this.y = y; 

} 


Point.prototype.toString = function () { 
return '(' + this.x + ', ' + this.y + ')'; 


class Point { 
constructor(x, y) { 
this.x = x; 
this.y = y; 


toString() { 
return '(' + this.x + ', ' + this.y + ')'; 
} 
} 





ES3 不 出 所 料 的 是 动用 prototype 对 象 来 模拟 ， 
这 与 传统 的 面 癌 对 象 语言 有 很 大 的 出 入 ， 很 容易 让 








新 学 习 这 门 语言 的 程序 员 感 到 困惑 。 





ES6 的 代码 则 接近 传统 语言 的 写法 ， 引 入 了 
class 关 键 字 ， 并 且 有 constructor 构 造 方法 ，this 关 键 
字 则 代码 实例 对 象 。Point 类 除了 构造 方法 ， 还 定义 
了 一 个 toString 方 法 。 注 意 ， 定 义 “ 类 ”的 方法 的 时 
候 ， 前 面 不 需要 加 上 function 这 个 关键 字 ， 直 接 把 
PR AUE ee 另外 ， 方 法 之 间 不 需 
Bes ， 加 了 会 报错 。 








ES6WJR, EE WAVE Mt RAI A 
Ae 


Class Point{ 
YA aa 


} 


typeof Point // "function" 
Point === Point.prototype.constructor // true 








上 面 代码 表明 ， 类 的 数据 类 型 就 是 函数 ， 类 本 
FA Te TA) PALE PA BL o 


构造 函数 的 prototype 属 性 ， 在 ES6 的 类 上 面 继 
续 存 在 。 事 实 上 ， 类 的 所 有 方法 都 定义 在 类 的 
prototype 属 性 上 面 。 





class Point { 
constructor(){ 
Tl esi 


} 
toString(){ 
II ia 

} 
toValue(){ 
ZI eia 


J 


J 


// 等 同 于 


Point.prototype = { 
toString: function(){}, 
toValue: function(){} 

} 














FER WISE PE ava AT, SRS it ce Ded AD J 
上 的 方法 。 


class B {} 
let b = new B(); 


b.constructor === B.prototype.constructor // true 








上 面 代 人 码 中 ，b 是 B 类 的 实例 ， 它 的 constructor 
方法 就 是 B 类 原型 的 constructor 方 法 。 由 于 类 的 方法 
都 定义 在 prototype 对 象 上 面 ， 所 以 类 的 新 方法 可 以 
i ai 不 过 ， 在 类 里 面 定 义 的 
方法 ， 部 是 不 可 亿 历 的 ， 这 一 点 与 ES5 的 行为 不 一 
BX 


Object.keys(Point.prototype) 
// [ 











Object.getOwnPropertyNames(Point.prototype) 
// {"constructor", "toString" ] 





constructor 方法 是 类 的 默认 方法 ， 通 过 new 命 
令 生成 对 象 实 例 时 ， 目 动 调用 该 方法 。 一 个 类 必须 
有 constructor 方 法 ， 如 果 没 有 显 式 定 义 ， 一 个 空 的 
constructor 方 法 会 被 默认 添加 。 


当 我 们 要 通过 类 生成 实例 时 ， 需 要 像 以 前 一 样 
使 用 new 关 键 字 ， 但 如 果 忘 记 加 上 new， 像 函数 那 
样 调 用 Class， 将 会 报错 。 


var point = Point(2, 3); 
// 正确 
var point = new Point(2, 3); 

















与 ES5 一 样 ， 关 的 所 有 实例 共 盏 一 个 原型 对 
Ree 





var p1 
var p2 


new Point(2,3); 
new Point(3,2); 


p1. proto__ === p2.__proto__ 


a 





Class 不 存在 变量 提升 Choist) ， 这 一 点 与 ES5 
完全 不 同 。 


new Foo(); // ReferenceError 
class Foo {} 


上 面 代码 中 ， 如 果 Foo 类 使 用 在 前 ， 定 义 在 
后 ， 这 样 会 报错 。 因 为 ES6 不 会 把 变量 声明 提升 到 
代码 头 部 。 这 种 规定 的 原因 与 下 文 要 提 到 的 继承 有 
关 ， 必 须 保证 子 类 在 父 类 之 后 定义 。 








{ 
let Foo = class {}; 
class Bar extends Foo { 


} 


} 





上 面 的 代码 不 会 报错 ， 因 为 class 继 承 Foo 的 时 
候 ，Foo 己 经 有 定义 了 。 但 是 ， 如 果 存 在 Class 的 提 
升 ， 上 面 代码 就 会 报错 ， 因 为 dass 会 被 提升 到 代码 





头 部 ， 而 let 命 令 是 不 提升 的 ， 所 以 导 臻 class 继承 
Foo 的 时 候 ，Foo 还 没有 定义 。 


Class 之 间 可 以 通过 extends 关 键 字 实现 继承 ， 这 
比 ES5 通 过 修改 原型 链 实 现 继承 ， 要 清晰 和 方便 很 


B « 





class ColorPoint extends Point { 
constructor(x, y, color) { 
super(x, y); // 调用 父 类 的 constructor(x，y) 
this.color = color; 


} 


toString() { 


return this.color + ' ' + super.toString(); // 调用 父 类 的 toSt 
ring() 
} 


} 





上 面 代码 中 ，constructor 方 法 和 toString 方 法 之 
中 ， 都 出 现 了 super 关 键 字 ， 它 在 这 里 表示 父 类 的 构 
造 函 数 ， 用 来 狐 建 父 类 的 this 对 象 。 








子 类 必须 在 constructor 方 法 中 调用 super 方 法 ， 
售 则 新 建 实例 时 会 报错 。 这 是 因为 子 类 没有 目 己 的 


this 对 象 ， 而 是 继承 父 类 的 this 对 象 ， 然 后 对 其 进行 
加 工 。 如 果 不 调用 super 方 法 ， 子 类 就 得 不 到 this 对 
象 。 








ES5 的 继承 ， 实 质 是 先 创 造 子 类 的 实例 对 象 
this， 然 后 再 将 父 关 的 方法 添加 到 this 上 面 
(Parent.apply(this)) 。ES6 的 继承 机 制 完 全 不 同 ， 
实质 是 先 创造 父 类 的 实例 对 象 this (所 以 必须 先 调 
用 super 方 法 ) ， 然 后 再 用 子 类 的 构造 函数 修改 


this. 





如 果子 类 没有 定义 constructor 方 法 ， 这 个 方法 
会 被 默认 添加 。 也 束 是 说 ， 不 管 有 没有 显 式 定义 ， 
任何 一 个 子 类 都 有 constructor 方 法 。 





另 一 个 需要 注意 的 地 方 是 ， 在 子 类 的 构造 函数 
中 ， 只 有 调用 super 之 后 ， 才 可 以 使 用 this 关 键 字 ， 

侍 则 会 报错 。 这 是 因为 子 类 实例 的 构建 ， 是 基于 对 
父 类 实例 加 工 ， 只 有 super 方 法 才能 返回 父 类 实例 。 


ES6 人 允许 继承 原生 构造 函数 定义 子 类 ， 这 意味 
着 ，ES6 可 以 自 定 义 原生 数据 结构 〈 比 如 Array、 
String 等 ) 的 子 类 ， 这 是 ES5 无 法 做 到 的 。 下 面 就 是 
定义 了 一 个 市 版 本 功能 的 数组 。 





class VersionedArray extends Array { 
constructor() { 
super (); 
this.history = [[]]; 
} 
commit() { 
this.history.push(this.slice()); 


revert() { 
this.splice(0, this.length, ...this.history[this.history.le 
ngth - 1]); 


} 
var x = new VersionedArray(); 


.push(1); 
.push(2); 
// [1, 2] 
.history // [[]] 


.commit(); 

-history // [[], [1, 2]] 
.push(3); 

// [1, 2, 3] 


.revert(); 
// [1, 2] 





与 ES5 一 样 ， 在 Class 内 部 可 以 使 用 get 和 set 关 键 
字 ， 对 某 个 属性 设置 存 值 函 数 和 取 值 函数 ， 拦 截 该 
属性 的 存 取 行为 。 





class MyClass { 
constructor() { 
PP er 


} 
get prop() { 
return ‘getter'; 


set prop(value) { 
console.log('setter: '+value); 


} 
let inst = new MyClass(); 


inst.prop = 123; 
// setter: 123 


inst.prop 
// ‘getter' 





ES6 定 义 静 态 方法 ， 也 比 原 来 的 清晰 好 多 ， 并 
且 ES6 的 静态 方法 是 可 以 被 子 类 继承 的 。 








class Foo { 
static classMethod() { 


return 'hello'; 


} 
} 


class Bar extends Foo { 


} 


Bar.classMethod(); // 'hello' 





静态 方法 也 是 可 以 从 super 对 象 上 调用 的 。 


class Foo { 
static classMethod() { 
return 'hello'; 


i 


class Bar extends Foo { 
static classMethod() { 
return super.classMethod() + ', too'; 
} 
} 


Bar .classMethod(); 








最 后 我 们 看 一 下 new.target 属 性 。new 是 从 构造 
函数 生成 实例 的 命令 。ES6 为 new 命 令 引 入 了 一 个 
new.target 属 性 ，《〈 在 构造 函数 中 ) 返回 new 命 令 作 
用 于 的 那个 构造 函数 。 如 果 构 造 函 数 不 是 通过 new 
命令 调用 的 ，new.target 会 返回 undefined， 因 此 这 个 
属性 可 以 用 来 确定 构造 函数 是 怎么 调用 的 。 








function Person(name) { 
if (new.target !== undefined) { 
this.name = name; 
} else { 
throw new Error( ' 必 须 使 用 new 生 成 实例 ' ) ， 
} 


} 
// 为 一 种 写法 


function Person(name) { 
if (new.target === Person) { 





this.name = name; 
} else { 
throw new Error( ' 必 须 使 用 new 生 成 实例 ' ) ， 
} 
} 
var person = new Person(' 张 三 '); // 正确 
var notAPerson = Person.call(person, 'SK='); // 报错 

















目前 ，ES6 这 个 类 机 制 还 在 不 断 改良 ， 其 最 大 
的 践 行者 React Native 甚 至 提供 了 一 些 更 好 的 语法 。 
而 无 论 是 ES6 的 原生 语法 还 是 React Native 的 改良 语 
法 ， 我 们 无 法 一 时 三 刻 直 接 在 浏览 右 中 直接 运行 它 
们 。 这 时 建议 大 家 使 用 babel 编 译 你 的 JavaScript。 
比如 下 面 的 ES6 代 码 。 











// 定 义 父 类 View 
class View { 
constructor(options) { 
this.model = options.model; 
this.template = options.template; 





} 


render() { 
return _.template(this.template, this.model.toObject()); 


} 


} 
// 实 例 化 父 类 View 
var view = new View({ 
template: 'Hello, <%= name %>' 
}); 
// 定 义 子 类 LogView， 继 承 父 类 View 
class LogView extends View { 
render() { 
var compiled = super.render(); 
console.log(compiled); 
} 
} 








编译 后 其 骨干 大 概 是 这 样 〈 随 着 babel 的 版 本 ， 
结果 当然 不 同 ) 。 借 此 机 会 ， 我 们 也 可 以 舌 探 一 下 
ES6 的 类 工厂 是 怎么 样 的 ! 





var View = (function() { 
function View(options) { 
_classCallCheck(this, View); 
this.model = options.model; 
this.template = options.template; 


_createClass(View, [{ 
key: 'render', 
value: function render() { 
return _.template(this.template, this.model.toObjec 


t()); 
t]); 


return View; 


HO; 


var LogView = (function(_View) { 
_inherits(LogView, _View); 
function LogView() { 
_classCallCheck(this, LogView); 
_get(Object.getPrototypeOf(LogView.prototype), ‘constru 
ctor',this).apply(this, arguments); 


_createClass(LogView, [{ 
key: 'render', 
value: function render() { 
var compiled = _get(Object.getPrototypeOf (LogView.p 
rototype), '‘render', 
this).call(this); 
console. log(compiled) ; 
} 
}]); 


return LogView; 


})(View); 








生成 的 两 个 类 是 包 时 在 IIFE 中 ， 里 面 是 一 个 同 
名 的 函数 。 这 个 函数 经 过 _createclass() 函数 的 处 
理 之 后 ， 被 返回 了 。 上 所 以 我 们 得 出 的 第 一 点 结论 项 





是 ，ES6 中 的 class 实际 就 是 函数 。 我 们 发 现 ， 在 
class 中 设 定 的 属性 被 放 在 ES5 的 构造 函数 中 ， 而 方 
法 则 以 键 值 对 的 形式 传 入 一 个 _createclass() 函数 
中 。 那 么 这 个 _createclass() AAC Millie STA 
法 呢 ? 


_createClass = (function() { 
function defineProperties(target, props) { 
for (var i = 0; i < props.length; i++) { 
var descriptor = props[i]; 
descriptor.enumerable = descriptor.enumerable || fa 


descriptor.configurable = true; 
if ('value' in descriptor) descriptor.writable = tr 


Object.defineProperty(target, descriptor.key, descr 


iptor); 


} 
return function(Constructor, protoProps, staticProps) { 
if (protoProps) defineProperties(Constructor.prototype, 
protoProps); 
if (staticProps) defineProperties(Constructor, staticPr 
ops); 
return Constructor; 





_createClass pcan AS A BEY BR) 
数 defineProperties， 这 个 函数 过 历 属 性 的 描述 符 ， 
进行 描述 a. 最 后 使 用 
Object.defineProperty0) 方 法 来 号 入 对 象 的 属性 
IIFE 的 renturn 部 分 有 两 个 分 文 ， 一 个 是 针对 一 个 类 
的 原型 链 方法 ， 一 个 是 静态 方法 ， 我 们 看 到 原型 链 
方法 被 写 入 构造 函数 的 原型 对 象 里 ， 而 静态 方法 则 
锌 直接 写 入 构造 函数 里 ， 因 此 我 们 不 用 实例 化 对 和 象 














就 可 以 直接 调用 一 个 闫 的 静态 方法 了 。 





我 们 再 看 ES6 中 的 类 继承 是 如 何 实现 的 。 


function _inherits(subClass, superClass) { 
if (typeof superClass !== 'function' && superClass !== null 


) { 


throw new TypeError('Super expression must either be nu 
ll or a function, not ' + typeof superClass); 


subClass.prototype = Object.create(superClass && superClass 
.prototype, { 
constructor: { 
value: subClass, 
enumerable: false, 
writable: true, 
configurable: true 
} 
H); 
if (superClass) Object.setPrototypeOf ? Object.setPrototype 
Of(subClass, superClass) : subClass.__proto__ = superClass; 


} 





_inheritsO 函 数 的 关键 部 分 便 是 
subClass.prototype = Object.create(…')。 通 过 
Object.create() 方 法 来 指定 新 创建 对 象 的 原型 ， 由 此 
省 去 了 对 父 类 构造 函数 的 处 理 ， 达 到 了 简单 的 原型 
继承 效果 。 





不 正如 此 ， 子 类 比 起 父 类 也 多 出 了 一 些 东 西 ， 
最 大 的 不 同 便 是 增加 了 一 个 _get() 函数 的 调用 。 我 
们 仔细 看 这 个 _get() 函数 会 及 现 它 接收 几 个 参数 ， 
包括 子 类 的 原型 、constructor 标识 符 ， 还 有 this 

。 再 看 下 面 对 Ssuper.renderO 的 处 理 ， 同 样 是 

用 _get() 函数 来 处 理 的 。 再 看 _get() 函数 的 源 
fh, BEAL UEM _get() 函数 的 作用 便 是 过 历 对 象 的 
原型 链 ， 找 出 传 入 的 标识 答对 应 的 属性 ， 把 它 用 
apply 绑 定 在 当前 上 下 文 上 执行 











最 后 提 一 下 ， 虽 然 ES6 类 是 如 此 好 用 方便 ， 但 
是 透 过 刚才 的 源码 分 林 ， 我 们 知道 它 是 基于 
Object.defineProperty， 而 这 个 API 在 IE8 只 是 针对 节 
点 ， 因 此 IE8 还 是 我 们 一 道 很 难 跨 过 去 的 槛 。 慷 量 

-下 目 家 产品 的 兼容 性 要 求 ， 然 后 决定 要 哪 种 类 工 
三 来 组 织 你 的 代码 吧 。 











[1] Gof, Gang of Four， 指 称 为 设计 模式 先驱 的 四 

A: Erich Gamma. Richard Helm. Ralph Johnson 和 
John Vlissides. 4-7 20H 20904F FUT at hie Sl 

时 代 的 著作 一 一 《设计 模式 : 可 复 用 面 问 对 象 软件 
的 基础 》， 该 书 曾 被 认为 古 整 个 软件 模式 发 展 的 先 
驱 。 该 书 总 结 的 23 种 设计 模式 ， 为 我 们 面向 对 象 开 
发 过 到 各 种 问题 提供 了 思路 与 模板 。 


第 5 章 ”选择 器 引擎 





jQuery 和 攒 借 选 择 右 风 厅 全 球 ， 从 而 使 各 大 框 以 
类 库 争 先 开 发 目 己 的 选择 右 ， 一 时 间 选 择 右 成 为 杠 
FR KIA AC o 


其 实 ， 早 期 jQuery 选择 喜与 我 们 现在 看 到 的 大 
不 一 样 。 它 最 初 是 使 用 混杂 xpath 语 法 的 selector， 
BGR AACS E HENNAR CCS A xpath fit 4 
过 来 位 置 伪 类 ) 的 Sizzle 。 但 Sizzle 也 一 直 在 变 ， 
为 它 的 关系 选择 器 一 直 存 在 问题 ， 因 此 不 断 重 构 ， 
在 jQuery 1.9 时 终于 搞定 ， 并 最 终 决 定 全 面 文 持 
CSS3 的 结构 伪 类 。 有 据 可 碍 的 早期 三 大 选择 器 引擎 
是 2003 年 Simon Willison 的 getElementsBySelector 
， 然 后 是 2004 年 Dean EdwardstJcssQuery ， 最 后 是 
2005 年 发 布 的 jQuery。 据 John Resig 在 《JavaScript 
精粹 》 说 ， 他 本 来 只 想 写 个 选择 器 引擎 ， 但 
CSSQuery“ 光 天 太 盛 >， 无 法 与 之 争锋， 匆忙 间作 为 
一 个 较为 完整 的 dom 类 库 面 世 。 























2005 年 ，Ben Nolan 的 Behaviour.js， 内 置 了 早 
以 闻名 于 世 的 getElementsBySelector， 是 第 一 个 集 
成 事件 处 理 、CSS 风 格 的 选择 右 引 擎 与 onload 人 处理 
的 类 库 。 


AS IP A BO fA] WK Bl Fe ll kas — PS a FE as dE, 
在 此 我 们 先 看 看 前 人 的 努力 吧 。 





5.1 WAAR SecA AS 





请 不 要 人 奶 问 2005 年 之 前 开发 人 员 是 怎么 在 这 
种 “ 缺 东 缺 西 ? 的 环境 下 王 活 的 ， 那 时 浏览 器 大 战 打 
得 正 柄 ， 程 序 员 们 发 明 了 navigator.userAgent 检 测 进 
行 自 保 ! 网 景 战败 ， 因 此 有 关 它 的 记录 不 多 。 但 下 
确 确 切切 留 下 许多 资料 ， 比 如 取得 元 素 。 我 们 可 以 
直接 根据 元 素 的 ID 就 取得 元 素 自身 [二 ， 不 通过 任 
何 API， 上 自动 映射 成 全 局 变量 。 在 不 关注 全 局 污染 
时 ， 这 是 很 酷 的 特性 。 又 如 取得 所 有 元 素 ， 直 接 
document.all。 取 得 某 一 种 标签 类 型 的 元 素 ， 只 需 做 
一 下 分 类 ， 如 了 标签 、document .alLl.tags("p") 。 
时 至 今天 ， 下 4 里 的 这 个 古老 API 还 能 在 正 10 标 准 模 
APERA] 





























有 资料 可 得 的 是 getElementById 
、getElementsByTagName 是 IE5 引 入 的 ， 那 是 1999 


年 的 事 ， 与 微软 男 一 个 辉 焊 的 产品 Windows 98 捆 绑 
在 一 起 。 因 此 ， 那 时 的 程序 的 代码 都 倾 同 于 为 下 做 
兼容 。 我 在 网 上 找到 一 个 让 IE4 文 持 getElementById 
的 代码 ， 刻 着 时 代 的 “烙印 ”。 


var ie4 = document.all && !document.getElementById; 
if(ie4) { 
document.getElementById = new Function('var expr = /A\\w[\\w\ 
\d]*$/, '+ 
‘elname=arguments[0]; if(!expr.test(elname)) { return null; 


+ 
‘else if(eval("document.all."+elname)) { return '+ 
‘eval("document.all."+elname); } else return null;') 





此 外 还 有 getElementsByTagName 的 实现 如 
iF 


function getElementsByTagName(str) { 
if (str == "*") 
return document.all 
} else { 
return document.all.tags(str) 





(AMIR Rat Haley, TERY 


getElementByld 是 不 区 分 表单 元 素 ID 与 Name， 
此 如 果 有 一 个 表单 元 素 只 定义 name 并 与 我 们 的 目标 
元 系 ID 同 名 ， 且 我 们 的 目标 元 系 在 它 的 后 面 ， 那 么 
束 会 选 错 元 系 。 这 个 问题 一 直 延 续 到 IE7。 














IE 的 getElementsByTagName 也 有 问题 。 当 参 
数 为 * 号 通配符 时 ， 它 会 混入 注释 节点 2 ， 并 且 无 
法 选取 Object 下 的 元 素 。 下 面 是 解决 办 法 。 





//J. Max Wilson 
if (/msie/i.test (navigator.userAgent)) {//only override IE 
document .nativeGetElementById = document.getElementById; 
document.getElementById = function(id){ 
var elem = document .nativeGetElementById(id); 
if(elem) {//IE5 
if(elem.id == id){ 
return elem; 
selse{//IE4 
for(var i1=1;i<document.all[id].length; i++) { 
if(document.all[id][i].id == id){ 
return document.all[id][i]; 


} 


l 
} 


return null; 
} 


//Dean Edwards 
function getElementsByTagName(node, tagName) { 

var elements = [], i = 0, anyTag = tagName === "*", next = no 
de.firstChild; 


while ((node = next)) { 
if (anyTag ? node.nodeType === 1 : node.nodeName === tagNam 
e) elements[it++] = node; 
next = node.firstChild || node.nextSibling; 
while (!next && (node = node.parentNode)) next = node.nextS 
ibling; 
} 


return elements; 


} 





此 外 W3C 还 提供 了 一 个 getElementsByName 的 
方法 ， 这 个 在 正中 使 用 也 有 问题 ， 它 只 能 选取 表单 





元 素 ， 由 于 我 们 后 面 用 不 到 它 ， 先 行 略 去 。 


这 是 Prototype.js 到 来 之 前 ， 所 有 可 用 的 原生 选 
择 嚣 。 因 此 Simon Willison 搞 出 
getElementsBySelector， 让 世人 眼前 一 亮 。 





之 后 的 情况 大 家 应 该 知道 了 ， 出 现 N 个 版 本 的 
getElementsBySelector 。 不 过 大 多 数 是 在 Simon 
Willison 的 基础 上 改进 的 ， 甚 至 当时 还 讨论 将 它 标 
准 化 ! 





http://lists.whatwg.org/pipermail/whatwg -whatwg.org/2005-Septem 
ber/subject .html#4782 


pO 


虽然 这 个 打算 最 后 搁浅 了 ， 但 Simon Willison 
的 getElementsBySelector 代 表 的 是 历史 的 前 进 方 
问 。jQuery 则 有 点 偏 问 了 。Prototype.js 则 在 Ajax 热 
炒 浪潮 中 扶 授 直上 上 ，Prototype.js 1.47Edocumentis HH 
日 后 成 为 标准 的 getElementsByClassName 与 失败 
了 的 getElementsBySelector ， 此 外 还 有 比 此 时 
jQuery 更 加 好 用 的 $$ 。 











不 过 ，jQuery 最 终 还 是 胜利 了 ，Sizzle 的 设计 很 
特别 ， 各 种 优化 别出心裁 。 浏 览 器 没有 | 办 关 ， 
Netscape 借 Firefox 还 魂 ， 挑 起 第 二 次 浏览 右 战 争 ， 

其 间 往 HTML 引 入 XML 的 xpath， 其 API 

为 document.evaluate 。 但 xpath 又 分 为 level1、 
level2、level3， 各 浏览 堪 在 不 同 版 本 的 文 持 又 不 一 
致 ， 加 之 语法 比较 复杂 ， 因 此 普及 不 开 ， 更 甬 论 存 
在 什么 pug。 同 一 时 间 浏 览 器 还 标准 化 了 








getElementsByClassName， 但 这 个 API 也 只 有 选择 器 
引 敬 的 作者 们 在 类 库 里 面 小 心中 距 使 用 ， 因 此 它 在 
Safari 与 Opera 存 在 一 些 奇怪 bug。 





微软 为 了 保住 占有 率 ， 在 IE8 上 加 
入 querySelector 与 querySeletorAll ， 相 当 于 
getElementsBySelector 的 升级 版 ， 它 还 文 持 前 有 所 未 
有 的 结构 伪 类 、 状 态 伪 类 、 语 言 伪 类 与 取 反 伪 类 。 
这 时 谷歌 的 Chrome 参 战 ， 激 发 标准 浏览 右 的 升级 热 
情 ， 耻 8 新 加 的 选择 器 大 家 都 文 持 了 ， 还 文 持 得 更 
标准 。 此 时 还 出 现 了 一 种 与 选择 器 功能 相反 的 API 
— [Lc #smatchesSelector ， 它 对 我 们 编写 选择 喜 
引擎 非常 有 帮助 。 现 在 CSS 方 面 有 关 selector 4 的 规 
范 还 在 起 草 中 ，querySeletorAll 也 暂 只 文 持 到 
selector 3 部 分 ， 但 即便 如 此 ， 目 前 带 来 的 兼容 性 问 
题 已 经 让 选择 器 引擎 作者 们 为 难 了 ! 




















5.2 getElementsBySelector 
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/* document.getElementsBySelector(selector ) 
New in version 0.4: Support for CSS2 and CSS3 attribute sele 
ctors: 
See http://www.w3.org/TR/css3-selectors/#attribute-selectors 
Version 0.4 - Simon Willison, March 25th 2003 
-- Works in Phoenix 0.5, Mozilla 1.3, Opera 7, Internet Expl 
orer 6, Internet Explorer 5 on Windows 
-- Opera 7 fails 
*/ 
function getAllChildren(e) { 
// 取 得 一 个 元 素 的 所 有 子孙 ， 兼 并 容 IE5 
return e.all ? e.all : e.getElementsByTagName('*'); 

















} 


document.getElementsBySelector = function(selector) { 
// 如 果 不 支 持 getElementsByTagName 则 直接 返回 空 数 组 
if (!document.getElementsByTagName) { 
return new Array(); 








} 

// 切 割 CSS 选 择 符 ， 分 解 一 个 个 单元 每 个 单元 可 能 代表 一 个 或 几 个 选择 器 ， 比 如 p 
.aaa 则 由 标签 选择 器 与 类 选 

// 择 器 组 成 ) 

var tokens = selector.split(' '); 

var currentContext = new Array(document); 

// 从 左 到 右 检 测 每 个 单元 ， 换 言 之 此 引擎 是 自 顶 向 下 选 元 素 

// 我 们 的 结果 集 如 果 中 间 为 空 ， 那 么 就 立即 中 止 此 循环 了 


for (var i = 0; i < tokens.length; i++) { 





























// 去 掉 两 边 的 空白 《但 并 不 是 所 有 的 空白 都 是 没 用 ， 
// 两 个 选择 器 组 之 间 的 空白 代表 着 后 代 选 择 器 ， 这 要 看 作者 们 的 各 显 神通 了 ) 
token = tokens[i].replace(/4\s+/,'').replace(/\st+$/,'')j;; 
// 如 果 包 含 ID 选择 器 ， 这 里 略 显 粗 糙 ， 因 为 它 可 能 在 引号 里 面 
// 此 选择 器 支持 到 属性 选择 器 ， 则 代表 着 它 可 能 是 属性 值 的 一 部 分 
if (token.indexOf('#') > -1) { 
// 这 里 假设 这 个 选择 器 组 以 tag#id 或 #id 的 形式 组 成 ， 可 能 导致 BUG 
// 但 这 和 暂且 不 谈 ， 我 们 还 是 沿 着 作者 的 思路 进行 下 去 吧 
var bits = token.split('#'); 
var tagName = bits[0]; 
var id = bits[1]; 
// 先 用 ID 值 取得 元 素 ， 然 后 判定 元 素 的 tagName 是 否 等 于 上 面 的 tagName 
// 此 处 有 一 个 不 严谨 的 地 方 ，element 可 能 为 hull1， 会 引发 异常 
var element = document.getElementById(id); 
if (tagName && element.nodeName.toLowerCase() != tagName) 






























































// 没有 直接 返回 空 结果 集 


return new Array(); 





} 

// 置 换 currentContext， 跳 至 下 一 个 选择 器 组 
currentContext = new Array(element); 
continue; 


} 
// 如 果 包 含 类 选择 器 ， 这 里 也 假设 它 以 .class 或 tag .class 的 形式 
if (token.indexof('.') > -1) { 


var bits = token.split('.'); 
var tagName = bits[0]; 
var className = bits[1]; 
if (!tagName) { 
tagName = '*'; 








} 

// 从 多 个 父 节 点 出 发 ， 取 得 它们 的 所 有 子孙 ， 

// 这 里 的 父 节点 即 包含 在 currentCcontext 的 元 素 节点 或 文档 对 象 

var found = new Array;// 这 里 是 过 滤 集 ， 通 过 检测 它们 的 className 

var foundCount = 0; 

for (var h = 0; h < currentContext.length; h++) { 
var elements; 











if (tagName == '*') { 
elements = getAllChildren(currentContext[h]); 
} else { 


elements = currentContext[h].getElementsByTagName(ta 
gName); 


} 


for (var j = 0; j < elements.length; j++) { 
found[foundCount++] = elements[j]; 
} 
} 


currentContext = new Array; 
var currentContextIndex = 0; 
for (var k = 0; k < found.length; k++) { 
//found[k] .className 可 能 为 空 ， 因 此 不 失 为 一 种 优化 手段 ， 但 new R 
egExp 放 在 // 外 围 更 适合 
if (found[k].className && found[k].className.match(new 
RegExp('\\b'+className+ 
'\\b'))) {£ 
currentContext[currentContextIndex++] = found[k]; 
} 
} 


continue; 





} 
// 如 果 是 以 tag[attr(~|^$*)=val] 或 [attr(~|^$*)=val] 的 形式 组 合 
if (token.match(/M(\w*)\[(\Ww+)([=~\|\MW\$\*]?)=?"?([^ 和 A\]")*)" 
?\)$/)) { 
var tagName = RegExp.$1; 
var attrName = RegExp.$2; 
var attrOperator = RegExp.$3; 
var attrValue = RegExp.$4; 
if (!tagName) { 
tagName = '*'; 








} 
// 这 里 的 逻辑 以 上 面 的 class 部 分 相似 ， 其 实 应 该 抽取 成 一 个 独立 的 函数 
var found = new Array; 
var foundCount = 0; 
for (var h = 0; h < currentContext.length; h++) { 
var elements; 











if (tagName == '*') { 
elements = getAllChildren(currentContext[h]); 
} else { 
elements = currentContext[h].getElementsByTagName(t 
agName ) ; 
} 


for (var j = 0; j < elements.length; j++) { 
found[foundCount++] = elements[j]; 
} 
} 


currentContext = new Array; 
var currentContextIndex = 0; 
var checkFunction; 


// 根 据 第 二 个 操作 符 生 成 检测 函数 ， 后 面 章 节 会 详解 ， 这 里 不 展开 








switch (attrOperator) { 
case '=': // 
checkFunction = function(e) { return (e 
attrName) == attrValue); }; 
break; 
case '~': 


checkFunction = function(e) { return (e. 


attrName).match(new RegExp 
('\\b'+attrValue+'\\b'))); }; 
break; 
case '|': 


checkFunction = function(e) { return (e. 


attrName).match(new RegExp 
('A'+attrValuet+'-?'))); }; 
break; 
case 'A': 


checkFunction = function(e) { return (e. 


attrName) .indexOf 
(attrValue) == 0); }; 
break; 
case '$': 


checkFunction = function(e) { return (e. 


attrName) .lastIndexOf 
(attrValue) == e.getAttribute(attrName) 
Value.length); }; 
break; 
case '*': 


checkFunction = function(e) { return (e. 


attrName).indexOf (attrValue ) 
> -1); }; 
break; 
default 


.getAttribute( 


getAttribute( 


getAttribute( 


getAttribute( 


getAttribute( 


.length - attr 


getAttribute( 


checkFunction = function(e) { return e.getAttribute(a 


ttrName); }; 


CcurrentContext = new Array; 
var currentContextIndex = 0; 
for (var k = 0; k < found.length; k++) { 
if (checkFunction(found[k])) { 
currentContext[currentContextIndext++] = 
} 
} 


continue; 


found[k]; 





// 如 有 果 没 有 "#"，"."，"[ "这样 的 特殊 字符 ， 我 们 就 当成 是 tagName 
tagName = token; 
var found = new Array; 
var foundCount = 0; 
for (var h = 0; h < currentContext.length; h++) { 
var elements = currentContext[h].getElementsByTagName(tag 
Name); 
for (var j = 0; j < elements.length; j++) { 
found[foundCount++] = elements[j]; 











} 
currentContext = found; 
} 
return currentcContext;// 最 后 返回 结果 集 


} 





显然 受 当时 的 网 速 限制 ， 页 面 不 会 很 大 ， 也 不 
可 能 发 展 起 复杂 的 交互 ， 因 此 JavaScript 还 没有 到 大 
规模 使 用 的 阶段 ， 我 们 看 到 那 时 的 库 也 不 怎么 重视 
全 局 污染 。 主 要 API 和 直接 在 document 上 操作 ， 参 数 





只 有 一 个 CSS 表 达 符 。 从 我 们 的 分 析 来 看 ， 它 并 不 
文 持 联 选择 器 《后 面 介绍 ) ， 并 且 要 求 每 个 选择 器 
组 不 能 超出 两 个 ， 售 则 报错 。 换 言 之 ， 它 只 对 下 面 
这 样 形式 的 CSS 表 达 式 有 效 。 


#aa p.bbb [ccc=ddd] 





CSSA FPG A 28 A oP el) a “ce FR a 2 
(Mid PE ae A AE EE PY ER ae A, FPL ip 
为 标签 选择 占 。 


作为 早期 的 选择 器 ， 它 也 没有 像 以 后 那样 对 结 
果 集 进行 去 午 ， 把 元 素 逐 个 按照 文档 出 现 的 顺序 进 
行 排序 。 我 们 在 第 一 和 指出 的 bug， 它 也 没有 规 
各 ， 这 可 能 受 当 时 JavaScript 技 术 交 流 太 少 所 致 。 这 
些 都 是 我 们 是 日 后 要 改进 的 地 方 。 


5.3 ”选择 右 引 苟 涉 及 的 知识 点 


全 


这 一 下 我 们 开始 学 习 一 下 5.2 节 中 介绍 的 大 量 概 
念 。 其 中 ， 有 关 选 择 右 引擎 实现 的 概念 大 多 数 是 笔 
者 从 Sizzle 中 抽取 出 来 的 ， 而 CSS 表 达 符 部 分 则 是 
W3C 近 供 的 。 那 么 我 们 先 从 CSS 表达 符 部 分 讲 起 
HE 


选择 符 是 指 一 条 CSS 样式 规则 的 最 左边 的 部 
分 ， 如 图 5-1 所 示 。 








上 面 的 只 是 理想 情况 ， 重 构 人 员 交 给 我 们 的 
CSS 文 件 ， 里 面 的 选择 符 可 是 复杂 多 了 。 选 择 符 混 
林 看 大 量 的 标记 ， 可 以 分 割 为 许多 更 细 的 单元 。 忆 
的 来 说 ， 分 为 4 大 类 16 种 。 此 外 ， 还 没有 包含 选择 
名 引擎 无 法 操作 的 伪 元 素 。 








4 大 类 是 指 并 联 选 择 器 、 简 单 选 择 器 、 关 系 选 
tear SAR 。 

Hkk 有 1 种 : Ws”, PANT 
Ea AP GIS haa RK 

简单 选择 器 分 5 种 : ID 、 标 签 、 类 、 属 性 、 
通配符 。 

RAI as 分 4 种 ;亲子 、 后 代 、 相 邻 、 兄 
长 。 


NR 分 6 种 : 动作 伪 类 . Awe. wa 
R. ASAR, AHWR. RRAK 。 


jQuery EWI SBA: 可 见 性 伪 类 
:Visible、 内 容 伪 类 :content()、 包 舍 伪 类 :has(). 


简单 选择 器 又 称 为 基本 选择 器 ， 这 是 在 
Prototype.js 之 前 的 选择 占 都 已 经 文 持 的 选择 占 类 
型 。 不 过 CSS 上 ，IE7 才 文 持 部 分 属性 选择 桌 。 其 
中 ， 它 们 设计 得 非常 整齐 划一 ， 我 们 可 以 通过 它 的 
第 一 个 字符 决定 它们 的 类 型 。 比 如 : ID 选 择 器 的 第 
一 个 字符 为 # ， 类 选择 器 为 . ， 属 性 选择 器 为 [ ， 通 
配 符 选 择 需 为 * ;标签 选择 需 为 不 包含 特殊 字符 的 
英文 数字 组 合 ，jQuery 就 是 使 用 isTag = 
1/\W/.test(part) 进行 判定 的 。 





在 实现 上 ， 我 们 在 这 里 有 许多 原生 API 可 用 ， 
如 getElementById、getElementsByTagName、 
getElementsByClassName、document.all。 属 性 选择 
ax FA] 以 用 getAttribute、getAttributeNode、 
attributes、hasAttribute，2003 年 曾 讨论 引入 


getElementsByAttribute, {AYA KI), Firefix 上 XUI 
的 同名 API 束 是 当时 的 产物 。 不 过 属性 选择 器 有 的 确 
比较 复杂 ， 历 史上 和 它 是 分 两 步 实 现 的 。 


CSS2.1 中 ， 属 性 选择 器 有 以 下 4 种 形态 。 














+ [att]: 选取 设置 了 att 属 性 的 元 素 ， 不 管 设 定 的 值 是 什么 。 
+ [att=val]: 选取 所 有 att 属 性 的 值 完全 等 于 val 的 元 素 。 
+ [att~=val]: 表示 一 个 元 拥有 属性 att， 值 为 一 个 被 空格 隔 开 的 多 个 字符 串 ， 
只 要 其 中 一 个 字符 串 等 于 val 就 能 匹配 上 。 基 于 此 特性 ， 如 果 浏 览 器 不 支持 geElement 
sByClassName, 我 们 可 以 将 aaa 转 换 为 [class~=aaa] 来 处 理 。 








































































































+ [att|=val]: 表示 一 个 元 素 拥有 属性 att， 并 且 该 属性 含 'val' 或 以 'val-' 
开头 。 





CSS3 中 ， 属 性 选择 器 义 增 加 3 种 形态 。 


+ [att^=val]: 选取 所 有 att 属 性 的 值 以 val 开 头 的 元 素 。 
+ [att$=val]: 选取 所 有 att 属 性 的 值 以 val 结 尾 的 元 素 。 
+ [att*=val]: 选择 所 有 att 属 性 的 值 包含 val 字 样 的 元 素 。 以 上 3 者 我 们 都 可 以 通 























过 indexOf 轻 松 实现 。 





此 外 ， 大 多 数 选择 噩 引擎 ， as 
[attl=val] 的 上 自 定 义 属性 选择 器 。 意 思 很 简单 ， 
所 有 att 属 性 不 等 于 val 的 元 素 ， 这 正好 与 i 











反 。 这 个 我 们 可 以 通过 CSS3 的 取 反 伪 类 实现 。 
5.3.1 KRATER 


关系 选择 器 是 不 能 单独 存在 的 ， 它 必须 夹 在 其 
他 种 类 的 选择 器 中 使 用 ， 但 茶 些 选择 器 引 敬 可 能 
许 它 放 在 最 开始 的 位 置 。 在 很 长 时 间 内 ， 只 存在 后 
代 选 择 占 CE F) ,就 是 两 个 简单 选择 器 FE 与 F 之 
间 的 空白 。CSS2.1 又 添加 了 两 个 ， 杀 子 选择 器 〈 了 
>F) 与 相 邻 选择 器 (E+E) ， 它 们 也 夹 在 两 个 
简单 选择 器 之 间 ， 但 允许 大 于 号 或 加 号 两 边 存 在 空 
日 ， 这 时 ， 空 白 就 不 是 表示 后 代 选 择 器 。CSS3 叉 添 
加 了 一 个 ， 兄 长 选择 器 (E~F) ， 规 则 同上 。 
CSS4 又 增加 了 一 个 父亲 选择 器 站， 不 过 其 规则 一 
直 在 变 ， 这 里 就 不 说 了 。 

















1. Jatt Peas 


通 第 我 们 在 引擎 内 构建 一 个 getAll 的 函数 ， 要 
求 传 入 一 个 文档 对 象 或 元 素 市 上 取得 其 子 了 外。 这 里 





要 特别 注意 IE 下 document.all 
. getElementsByTagName("*") 混入 注释 节点 的 问 


题 。 
2. ATJE A 

这 个 我 们 如 果 不 打 算 兼 容 XML， 那 么 直接 使 用 
children 就 行 了 。 不 过 IE5~IE8 它 都 会 混入 注释 节 
点 ， 表 5-1 是 兼容 列表 。 


表 5-1 


function getChildren(el) { 
if (el.childElementCount) { 
return [].slice.call(el.children); 





var ret = []; 
for (var node = el.firstChild; node; node = node.nextSiblin 


g) { 
node.nodeType == 1 && ret.push(node); 


return ret; 


Pt 
3. FAB Eas 











FEIRA FF és WL ee AS WGA AY “BS 
节点 ， 视 情况 使 用 nextSibling 或 nextElement 
Sibling. 


function getNext(el) { 
if ("nextElementSibling" in el) { 
return el.nextElementSibling 


} 
while (el = el.nextSibling) { 
if (el.nodeType === 1) { 
return el 


Í 


return null; 





4. 见长 选择 需 





兄长 选择 右 束 是 取 其 左边 的 所 有 同 级 元 素 节 





function getPrev(el) { 
if ("previousElementSibling" in el) { 
return el.previousElementSibling; 


while (el = el.previousSibling) { 


if (el.nodeType === 1) { 
return el; 


} 


return null; 





上 面 提 到 的 childElementCount 和 和 
nextElementSibling 都 是 2008 年 12 月 通过 Element 





Traversal 规 范 的 ， 用 于 过 历 元 素 节 点 。 加 上 后 来 补 
充 的 parentElement， 我 们 得 找 元 素 就 非常 方便 ， 如 
表 5-2 所 示 。 





表 5-2 


iA PRA 子 元素 


firstChild firstElementChild 























上 面 的 


parentNode parentElement 








5.3.2 H% 


TNR 是 选择 上 融 中 最 庞大 的 家 族 ， 从 CSS1 开 始 
支持 ， 以 字符 串 开 头 。 在 CSS3， 出 现 了 要 求 传 参 的 
结构 仿 关 与 取 反 伪 类 。 


1. SER 


JEWIN NBER ARMPIT ATA, H 
中 链接 伪 类 由 :visited 和 :link 组 成 ， 用 户 行 为 伪 类 
由 :hover、:active 和 :focus 组 成 。 这 里 我 们 基本 上 只 
伦 模拟 :link， 而 在 浏览 器 原生 的 querySelectorAll 对 
它们 的 支持 也 存在 差异 ，IE8 一 正 10 取 :link 存 在 错 
误 ， 它 只 能 取 A 标 从 ， 实 际 :link 是 指 代 A、AREA、 
LINK 这 3 种 标签， 而 其 他 标签 浏览 占 痢 正确 。 
外 ， 除 Opera，Safari 外 ， i 
第 。 除 Opera 外 ， 其 他 浏览 器 取 :hover 都 正确 。 剩 下 





的 :active 与 :visited 都 为 零 。 下 面 是 测试 页 面 。 





<!DOCTYPE HTML> 
<html> 
<head> 

<title></title> 

<link href="aa" type="text/css" rel="stylesheet" charse 
t="utf-8" /> 

<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 

<script> 

window.onload = function() { 
document .querySelector("#aaa").onclick = functi 


on() { 
ength);//1 


alert(document.querySelectorAll(":focus").1 


} 


document .querySelector("#bbb").onmouseover = fu 
nction() { 
//4 html, body, p, a 
alert(document.querySelectorAll(":hover").1 
ength); 


} 


function test() { 
alert(document.querySelectorAll(":link").length 
);// 6 
} 
</script> 
</head> 
<body> 
<p><a href="javascript:void 0" id="aaa">aaa</a></p> 
<p><a href="javascript:void 0" id="bbb">bbb</a></p> 
<button type="button" onclick="test()"> 点 我 </button> 
<img src="planets.jpg" border="0" usemap="#planetmap" a 
1t="Planets" /> 
<map name="planetmap" id="planetmap"> 
<area shape="circle" coords="180,139,14" href ="venu 
s.html" alt="Venus" /> 
<area shape="circle" coords="129,161,10" href ="merc 
ur. html" alt="Mercury" /> 
<area shape="rect" coords="0,0,110,260" href ="sun.h 


tml" alt="Sun" /> 
</map> 
</body> 
</html> 





伪 类 没有 专门 的 API 得 到 结果 集 ， 因 此 我 们 需 
要 通过 上 一 次 得 到 的 结果 集 进行 过 滤 。 在 浏览 器 
中 ， 我 们 可 以 通过 document.links 得 到 部 分 结果 ， 
为 它 不 包含 LINK 标 签 。 因 此 ， 最 好 的 方法 是 判定 





它 的 tagName 是 否 等 于 A AREA 、LINK 的 其 中 
一 个 
|o 


2. Amty# 

目标 伪 类 即 :target 仿 类 ， 指 其 id 或 者 name 属 性 
与 UREL 中 的 hash 部 分 〈 即 # 之 后 的 部 分 ) 匹配 上 的 
元 素 。 

璧 如 文档 中 有 一 个 元 素 ， 其 id 为 section_2 ， 
而 URL 中 的 hash 部 分 也 是 #section 2, MACH 
我 们 要 取 的 元 素 。 








Sizzle} HJ EVE RAUN F o 


"target": function(elem) { 
var hash = window.location && window.location. hash; 
return hash && hash.slice(1) === elem.id; 


ty 





3. 语言 伪 类 

语言 伪 类 即 :lang 伪 类 ， 用 来 设置 使 用 特殊 语言 
内 容 的 样式 。 比 如 :lang(de) 的 内 部 应 该 为 德语 ， 需 
要 特殊 处 理 。 


注意 lang 虽 然 作 为 DOM 元 素 的 一 个 属性 ， 
但 :lang 伪 类 与 属性 选择 器 有 所 不 同 ， 有 具体 表现 
在 :lang 伪 类 具有 “继承 性 ”>， 如 下 面 HIML 表 示 的 文 
档 。 


<body lang="de"><p> 一 个 段落 </p></body> 


如 果 使 用 [lang=de] 则 只 能 选择 到 body 元 系 ， 








为 p 元 素 没 有 lang 属性 。 但 是 使 用 :lang(de) 则 可 以 
同时 选择 到 body 和 p 元 厅 ， 因 为 依 类 上 共有 继承 的 特 
PE 。 





Sizzle 中 的 过 滤 函 数 如 下 。 


//https://github.com/jquery/sizzle/blob/2.3.0/src/sizzle.js#L14 
18-L1437 
"lang": markFunction( function( lang ) { 
// lang value must be a valid identifier 
if ( !ridentifier.test(lang || "") ) { 
Sizzle.error( "unsupported lang: " + lang ); 
} 


lang = lang.replace( runescape, funescape ).toLowerCase(); 
return function( elem ) { 
var elemLang; 
do { 
if ( (elemLang = documentISHTML ? 
elem.lang : 
elem.getAttribute("xml:lang") || elem.getAttrib 
ute("lang")) ) { 


elemLang = elemLang.toLowerCase(); 
return elemLang === lang || elemLang.indexOf( 1 
ang + | ) 二 二 二 O; 


} 
} while ( (elem = elem.parentNode) && elem.nodeType === 


1 ); 
return false; 
J}; 
H), 





对 比 mass 的 实现 如 下 。 


lang: { // 标 准 CSS3 语 言 伪 类 
exec: function(flags, elems, arg) { 

var result = [], 
reg = new RegExp("4" + arg, "i"), 
flag_not = flags.not; 

for (var i= 0, ri = 0, elem; elem = elems[it++];) { 
var tmp = elem; 
while (tmp && !tmp.getAttribute("lang") ) 
tmp = tmp.parentNode; 


tmp = !! (tmp && reg.test(tmp.getAttribute("lang") ) 


if (tmp ^ flag_not) result[ri++] = elem; 
} 


return result; 





4. 状态 伪 关 


状态 伪 类 用 于 标记 一 个 UI 元 素 的 当前 状态 ， 
由 :checked、:enabled、:disabled 和 :indeterminate 这 4 
个 盆 类 组 成 。 我 们 可 以 分 别 通 过 元 素 的 checked、 
disabled、indeterminate 属 性 进行 判定 。 














5. MRAR 


取 反 伪 类 即 :not 伪 类 ， 其 参数 为 一 个 或 多 人 简单 
选择 占 ， 里 面 用 逗号 隔 开 。 在 jQuery 等 选择 器 引 苟 


ICE AAA i eae, Gee] DAWES 
IRR EAR 


5.3.3 ”其 他 概念 


种 子 集 : 或 者 叫 候选 集 。 如 果 CSS 选 择 符 非 
第 复 杂 ， 我 们 要 分 几 步 才能 得 到 我 们 想 要 的 元 素 ， 
那么 第 一 次 得 到 的 元 素 集合 残 叫 种 子 集 。 在 Sizzle 
这 样 基本 从 右 到 左 ， 它 的 种 子 集中 就 有 一 部 分 为 我 
们 最 后 得 到 的 元 素 。 如 果 选 择 器 引擎 是 从 左 到 右 选 
择 器 ， 那 么 它们 只 是 我 们 继续 查 它 们 的 孩子 或 兄弟 
的 “据点 ”而 已 。 














结果 集 : HEA S| BARN CREA 
现在 约定 俗 成 ， 它 要 你 持 与 querySelectorAll 得 到 的 
结果 一 致 ， 即 要 求 没 有 重复 元 素 ， 且 顺序 与 它们 在 
DOM 树 上 出 现 的 顺序 一 致 。 








Wye : 我 们 选取 一 组 元 素 后 ， 它 之 后 每 一 


个 步骤 要 处 理 的 元 素 集合 都 可 以 称 之 为 过 滤 集 。 比 
Up.aaa, WIRD Gas 5c FF querySelectorAll, {A5¢ 
#¢getElementsByClassName, ASA TRAC FB 
种 子 集 ， 然 后 在 循环 中 通过 tagName==="P" 进 行 过 
沽 。 大 不 文 持 ， 只 能 通过 getElementsByTagName 得 
到 种 子 集 ， 然 后 通过 className 进 行 过 滤 。 显 然 大 

多 数 情 况 下 ， 前 者 比 后 者 快 多 了 。 同 理 ， 如 果 它 们 
之 间 存 在 ID 选择 器 ， 由 于 ID 在 一 个 文档 中 不 允许 重 
复 ， 因 此 使 用 ID 进行 得 找 更 快 。 在 Sizzle 中 ， 如 末 

不 文 持 querySelectorAll， 它 会 智能 地 以 ID、Class、 

Tag 的 顺序 进行 租 找 。 





We Peas REZ : 一 个 选择 符 被 并 联 选 择 器 划分 
成 的 每 一 个 大 分 组 。 

选择 器 组 : 一 个 选择 器 群 组 被 关系 选择 正 划 
分 的 第 一 个 小 分 组 。 考 虑 到 性 能 ， 每 一 个 小 分 组 建 
议 都 加 上 tagName， 因 为 这 样 在 下 6 会 方便 我 们 使 用 


getElementsByTagName。 比 如 div p.aaa 比 div .aaa 快 





多 了 。 前 者 是 通 at aaa 
找 ， 最 后 用 className 过 滤 ， 后 者 是 通 
getElementsByTagName 得 到 种 子 集 ， AMEN 
的 所 有 子孙 ， 明 显 这 样 得 到 的 过 滤 集 比 前 者 的 数量 
多 很 多 。 从 实现 上 说 ， 你 可 以 选择 从 左 到 右 ， 也 可 
以 像 Sizzle 那 样 从 右 到 左 ， 但 Sizzle 只 能 说 大 体 上 是 
这 个 方向 ， 实 际 情况 复杂 多 了 。 


矿 外 ， 选 择 袁 也 分 为 编译 型 与 非 编 详 型 。 编 详 
型 是 EXT 发 明 的 ， 这 个 阵营 的 选择 右 中 有 EXT、 
QWrap、NWMatchers、JindoJS。 非 编译 型 的 就 更 
多 了 ， 如 Sizzle、Icarus (mass Framework hit %4 
引擎 ) 、Slick (mootools 的 选择 嚣 ) 、YUI、 
dojo. uupaa, peppy...... 


还 有 一 种 利用 xpath 实 现 的 选择 费 ， 最 著名 的 是 
Base2。 它 先 实现 了 xpath 那 一 僚 ， 方 便 正 也 能 使 用 


document. evaluate， 然 后 将 CSS 选 择 符 翻译 成 


xpath。 其 他 比较 出 名 的 有 casperjs、DOMAssistant 
ips 
sÏ o 


像 Sizzle、mootools、Icarus 等 还 支持 选择 XML 
元 了 系 ， 因 为 XML 是 一 种 重要 的 数据 传输 格式 ， 后 端 
通过 XHR 返 回 的 可 能 就 是 XML， 这 样 我 们 通过 选 
择 器 引擎 抽取 所 需要 的 数据 吏 简 单 多 了 。 


5.4 选择 器 引 警 涉及 的 通用 函数 
5.4.1 isXML 


最 强大 的 前 几 名 选择 器 引擎 都 能 操作 XML 文 
档 ， 但 XML 与 HTML 存 在 很 大 的 差异 ， 没 有 
className 和 getElementByld， 并 日 nodeName 是 区 分 
大 小 写 的 ， 在 旧版 本 正中 还 不 能 直接 给 XML 元 系 添 
加 自 定义 属性 。 因 此 区 分 XML 和 HTML 是 非常 有 必 
要 的 ， 我 们 看 一 下 各 大 引擎 的 实现 吧 。 








Sizzle 的 实现 如 下 : 


var isXML = Sizzle.isXML = function( elem ) { 

var documentElement = elem && (elem.ownerDocument || elem). 
documentElement; 

return documentElement ? documentElement.nodeName !== "HTML 


" : false; 


j 








但 这 样 不 严谨 ， 因 为 XML 的 根 节 点 可 能 是 


HTML 标 签 ， 比 如 这 样 创 建 一 个 XML 文档 : 


try { 
var doc = document.implementation.createDocument(null, ' 


L', null); 
alert(doc.documentElement ) 
alert(isXML(doc) ) 


} catch (e) { 
alert(" 不 支持 creatDocument 方 法 ") 





} 





我 们 来 看 mootools 的 slick 的 实现 。 


var isXML = function(document) { 

return ( !! document.xmlVersion) || ( !! document.xml) || ( 
toString.call(document) == '[object XMLDocument]') || (document 
.nodeType == 9 && document.documentElement.nodeName != 'HTML'); 


了 











mootools 用 到 了 大 量 属 性 来 进行 判定 ， 从 
mootools1.2 到 现在 还 没什么 改动 ， 说 明 还 是 很 可 靠 
的 。 我 们 再 精简 一 下 。 在 标准 浏览 器 中 ， 姑 露 了 一 
个 创建 HTML 文档 的 构造 器 HIMLDocument， 而 下 
下 的 XML 元 素 又 拥有 selectNodes。 


var isXML = window.HTMLDocument ? function(doc) { 


return !(doc instanceof HTMLDocument ) 
} : function(doc) { 

return "selectNodes" in doc 
} 





不 过 这 些 方法 都 只 是 规范 ，JavaScript 对 象 可 以 
随意 添加 ， 属 性 法 很 容易 被 攻破 ， 最 好 是 使 用 功能 
法 。 无 论 XML 或 HTML 文档 都 支持 createElement 方 
法 ， 我 们 判定 创建 了 元 素 的 nodeName 是 否 区 分 大 
2 


var isXML = function(doc) { 


return doc.createElement("p").nodeName !== doc.createElemen 
t("P").nodeName; 


}; 





这 是 我 当前 能 给 出 的 最 严 齐 的 函数 了 。 


5.4.2 contains 








contains 方 法 就 是 判定 参数 1 是 否 包 含 参 数 2。 
这 通常 用 于 优化 ， 比 如 早期 的 Sizzle， 对 于 #aaa 
p.class 这 个 选择 从 ， 它 会 优先 用 


getElementsByClassName®K getElementsByTagName 
取 种 子 集 ， 然 后 束 不 继续 往 左 走 了 ， 直 接 跑 到 最 左 
的 拓 aaa， 取 得 如 aa 元 系 ， 然 后 通过 contains 方 法 进行 
过 小 。 随 着 Sizzle 的 体积 进行 增 大 ， 它 现在 只 剩 下 
另 一 个 天 于 ID 的 用 法 ， 即 ， 如 果 上 下 文 对 象 非 文档 
对 象 ， 那 么 它 会 取得 其 ownerDocument， 这 样 就 可 
以 用 getElementById， 然 后 利用 contains 方 法 进行 验 
证 ! 








//Sizzle 1.10.15 
var newContext = context.nodeType === 9 ? context : context.own 
erDocument 
if ( newContext && 
(elem = newContext.getElementById( m )) && 
contains( context, elem ) && 


elem.id === m ) { 
results.push( elem ); 
return results; 





我 们 再 看 看 contains 的 实现 。 





//Sizzle 1.10.15 


var rnative = /A[A{]+\{\s*\[native \w/, 

hasCompare = rnative.test( docElem.compareDocumentPosition ), 

contains = hasCompare || rnative.test(docElem.contains) ? 
function(a, b) { 


var adown = a.nodeType === 9 ? a.documentElement : 


bup = b && b.parentNode; 
return a === bup || !!(bup && bup.nodeType === 1 && 


adown.contains ? 
adown.contains(bup) : 


a.compareDocumentPosition && a.compareDocum 
entPosition(bup) & 16 


了 


y: 
function(a, b) { 
if (b) { 
while ((b = b.parentNode)) { 
if (b == a) { 
return true; 
} 
} 
return false; 
}; 





它 目 己 做 了 预 判定 ， 但 这 时 如 果 传 和 ML 元 系 
市 反 ， 可 能 就 会 出 错 。 因 此 建议 改 成 实时 判定 ， 虽 





然 每 次 进入 者 需要 判定 一 次 使 用 哪个 原生 API。 


现在 来 解释 一 下 contains 
与 compareDocumentPosition 这 两 个 API。contains 
原来 是 了 正 的 私有 实现 ， 后 来 其 他 浏览 器 也 借鉴 这 方 
法 ， 如 Firefox 在 9.0 中 也 装 了 此 方法 。 它 是 一 个 元 素 


节点 的 方法 ， 如 果 另 一 个 等 于 或 包含 于 它 的 内 部 ， 
就 返回 true。 


compareDocumentPosition 古 DOM Level 3 
specification 定 义 的 方法 ，Firefox 等 标准 浏览 右 都 支 
持 ， 它 用 于 判定 两 个 节点 的 关系， 而 不 单 止 是 包含 
关系 。 这 里 是 从 
NodeA. a 回 的 结 
果 ， 包 含 你 可 以 得 到 的 信息 ， 如 表 5-3 所 示 。 





IC oe 


当 〔 或 者 一 个 在 文档 之 




















010000 16 节点 A 包含 节点 B 





浏览 器 的 私有 使 用 




















有 时 候 ， 两 个 元 素 的 位 置 关 系 可 能 连续 满足 上 
表 的 两 种 情况 ， 比 如 A 包含 B， 并 且 A 在 B 的 前 面 ， 


那么 compareDocumentPosition 束 返回 20。 





由 于 旧版 本 下 不 文 持 
compareDocumentPosition， 因 此 jQuery 的 作者 John 
Resig'S J MIZ K MsourceIndex ， 用 到 下 的 另 一 
个 私有 实现 。sourceIndex 会 根据 元 素 的 位 置 从 上 
到 下 ， 从 左 到 右 依 次 加 1， 比 如 HTML 标 签 的 
sourceIndex 为 0，HEAD 标 签 的 为 1，BODY 标 签 为 
2，HEAD 的 第 一 个 子 元 素 为 3..…... 如 来 元 系 不 在 
DOM 树 ， 那 么 返回 -1。 











// Compare Position - MIT Licensed, John Resig 
function comparePosition(a, b) { 
return a.compareDocumentPosition ? a.compareDocumentPositio 
n(b) : 
a.contains ? (a != b && a.contains(b) && 16)+ 
(a != b && b.contains(a) && 8)+ 


(a.sourceIndex >= 0 && b.sourceIndex >= 0 ? 
(a.sourceIndex < b.sourceIndex && 4)+ 
(a.sourceIndex > b.sourceIndex && 2): 1): 0; 





5.43 ”节点 排序 与 去 重 


为 了 让 选择 器 引擎 搜 到 的 结果 集 尽 可 能 接近 原 
生 API 的 结 末 《〈 因 为 在 最 新 的 浏览 右 中 ， 我 们 可 能 
只 使 用 querySelectorAl 实 现 ) ， 我 们 需要 让 元 素 节 
点 按 它们 在 DOM 树 出 现 的 顺序 排序 。 





在 了 正 及 Opera 早 期 的 版 本 ， 我 们 可 以 使 
用 sourceIndex 进行 排序 。 


标准 浏览 颖 可 以 使 
用 compareDocumentPosition ， 上 面 不 是 介绍 它 可 
以 判定 两 个 节点 的 位 置 天 系 吗 ? 我 们 只 要 将 它们 的 
结果 按 位 与 4 不 等 于 0 就 知道 其 前 后 顺序 了 。 





此 外 ， 标 准 浏 览 器 的 Range 对 象 有 一 


““compareBoundaryPoints 方法 ， 它 也 能 迅速 得 到 
两 个 元 系 的 前 后 顺序 。 


var compare = comparerange.compareBoundaryPoints(how, sourceRan 
ge); 





compare: 其 值 可 能 为 1、0、-1 (0 为 相等 ; 1 
为 comparerange 在 sourceRange 之 后 ; -1 为 
comparerange 在 sourceRange 之 前 ) 。 





how: 比较 哪些 边界 点 ， 为 常数 。 


(1) Range .START_T0O_START 一 比较 两 个 Range 节 点 的 开始 点 。 
(2) Range .END_TO_END 一 比较 两 个 Range 节 点 的 结束 点 。 
(3) Range.START_TO_END 一 用 sourceRange 的 开始 点 与 当前 范围 的 结束 点 比较 。 














(4) Range .END_TO_START 一 用 sourceRange 的 结束 点 与 当前 范围 的 开始 点 比较 。 





特别 的 情况 发 生 于 要 兼容 旧版 本 标准 浏 贤 絮 与 
XML 文档 时 ， 这 时 只 有 一 些 很 基础 的 DOM API, 
我 们 需要 使 用 nextSibling 来 判定 谁 是 哥哥 ， 谁 是 第 
用 。 如 果 它 们 不 是 同一 个 父 厄 点 ， 我 们 就 需要 将 问 








题 转化 为 求 最 近 公 共 祖 先 ， 判 定 谁 是 父亲 ， 谁 是 伯 
父 。 到 这 里 ， 已 经 是 纯 算法 的 问题 了 。 实 现 的 思路 
有 许多 ， A 不 断 问 上 获取 它 
们 的 父 节 点 ， 直 到 HTML 元 素 连同 最 初 的 那个 节点 
组 成 两 个 数组 ， 然 后 每 次 取 数 组 最 后 的 元 系 进 行 比 
较 。 如 果 相 同 就 去 掉 ， 一 直 去 掉 到 不 相同 为 止 ， 

后 用 nextSibling 结 束 。 下 面 是 测试 代码 ， 上 自己 找 一 
个 HTML 页面 做 标本 。 























window.onload = function() { 
function shuffle(a) { 
// 洗 牌 
var array = a.concat(); 
var i = array.length; 
while (i) { 
var j = Math.floor(Math.random() * i); 
var t = array[--1]; 
array[i] = array[j]; 
array[j] = t; 





return array; 


} 
var log = function(s) { 

// 碍 看 调试 消息 

window.console && window.console.log(s) 
} 


var sliceNodes = function(arr) { 
// 将 NodeList 转 换 为 纯 数组 
var ret = [], 
1 = arr.length; 
while (1) 
ret[--i] = arr[i]; 





return ret; 


} 
var sortNodes = function(a, b) { 
// 节 点 排序 
var p = "parentNode", 
ap = a[p], 
bp = b[p]; 
if (a === b) { 
return 0 
} else if (ap === bp) { 
while (a = a.nextSibling) { 
if (a === b) { 
return -1 
} 
} 
return 1 
} else if (!ap) { 
return -1 
} else if (!bp) { 
return 1 
} 


var al = [], 


ap =a 
// 不 断 往 上 取 ， 一 直 取 到 HTML 


while (ap && ap.nodeType === 1) { 
al[al.length] = ap 
ap = ap[p] 
} 
var bl = [], 
bp = b; 
while (bp && bp.nodeType === 1) { 
bl[bl.length] = bp 
bp = bp[p] 











// 然 后 逐一 去 掉 公 共 祖 先 

ap = al.pop(); 

bp = bl.pop(); 

while (ap === bp) { 
ap = al.pop(); 
bp = bl.pop(); 


I 
if (ap && bp) { 
while (ap = ap.nextSibling) { 
if (ap === bp) { 





return -1 

















} 
return 1 
return ap ? 1: -1 
} 
var els = document.getElementsByTagName("*") 
els = sliceNodes(els); // 转 换 成 纯 数组 
log(els); 
els = shuffle(els); // 洗 牌 (模拟 选择 器 引擎 最 初 得 到 的 结果 集 的 情况 ) 
log(els); 
els = els.sort(sortNodes); // 进 行 节点 排序 
log(els); 





此 外 ， 我 们 还 有 一 种 方法 ， 束 是 选择 结束 后 ， 
a 得 到 所 有 





元 素 节 点 ， 这 时 它们 肯定 是 排 好 序 的 。 我 们 再 依次 
为 它们 添加 一 个 类 似 sourceIndex 的 自 定义 属性 ， 值 
为 它 的 索引 值 ， 接 下 来 怎么 做 惑 无 需 我 多 言 了 。 





好 了 ， 我 们 暂且 放下 ， 看 一 下 各 大 浏览 器 的 实 
现 。 


Mootools 的 Slick 引 擎 ， 它 的 比较 函数 已 经 注 明 


是 来 自 Sizzle 的 (准确 来 说 Sizzle1.6 左 右 ， 现 在 它 也 


MOI HEIP 。 


features.documentSorter = (root.compareDocumentPosition) ? func 
tion(a, b) { 

if (!a.compareDocumentPosition || !b.compareDocumentPositio 
n) 

return 0; 
return a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 
ee okie 
} : ('sourceIndex' in root) ? function(a, b) { 

if (!a.sourceIndex || !b.sourceIndex) 

return 0; 
return a.sourceIndex - b.sourceIndex; 
: (document.createRange) ? function(a, b) { 
if (!a.ownerDocument || !b.ownerDocument ) 
return 0; 
var aRange = a.ownerDocument.createRange(), 
bRange = b.ownerDocument.createRange(); 

aRange.setStart(a, 0); 

aRange.setEnd(a, 0); 

bRange.setStart(b, 0); 

bRange.setEnd(b, 0); 

return aRange.compareBoundaryPoints(Range.START_TO_END, bRa 
nge); 
} : null; 








它 没 有 打算 文 持 XMEL 与 旧版 本 标准 浏览 医 ， 不 
文 持 就 个 排序 。 


mass Framework 的 Icarus 引 擎 ， 它 结合 了 一 位 


编程 蜗 手 J 给 出 的 算法 ， 在 排序 去 重 上 远 胜 


Sizzle。 突 破 点 在 于 ， 无 论 Sizzle 或 者 Slick， 它 们 都 
征 通 过 传 入 比较 函数 进行 排序 。 而 数组 的 原生 sort 
方法 册 ， 当 它 传 一 个 比较 函数 时 ， 不 管 它 内 部 用 
哪 种 排序 算法 ， 都 需要 多 次 比 对 ， 所 以 非常 耗 时 。 
如 果 能 设计 让 排序 在 不 传 参 的 情况 进行 ， 那 么 速度 


MAJER | 





下 面 是 具体 思路 《当然 只 能 用 于 下 或 早期 
Opera) 。 








(1) 取出 元 系 节 点 的 sourceIndex 值 ， 转 换 成 
一 个 String 对 象 。 





(2) 将 元 素 市 点 附 在 String 对 象 上 。 
(3) 用 String 对 象 组 成 数组 。 
(4) 用 原生 的 sort 进 String 对 象 数 组 排序 。 


(5) 在 排 好 序 的 String 数 组 中 ， 按 序 取 出 元 素 


ad, BU AYA BARI Ar AG ARR o 





function unique(nodes) { 
if (nodes.length < 2) { 
return nodes; 


} 


var result = [], 
array = [], 
unigqResult = {}, 
node = nodes[0], 
index, ri = 0, 
sourceIndex = typeof node.sourceIndex === "number", 
compare = typeof node.compareDocumentPosition == "funct 
ion"; 
// WR sourceIndex, FeAl A aA AR 
//http://www.cnblogs.com/jkisjk/archive/2011/01/28/array_quickl 
y_sortby. html 
if (!sourceIndex && !compare) { // 用 于 旧版 本 IE 的 XML 
var all = (node.ownerDocument || node).geElementsByTagN 
ame("*"): 
for (var index = 0; node = all[index]; index++) { 
node.setAttribute("sourceIndex", index); 





} 


sourceIndex = true; 
} 
if (sourceIndex) { //IE opera 
for (var i = 0, n = nodes.length; i < n; i++) { 
node = nodes[i]; 


index = (node.sourceIndex || node.getAttribute("sou 
rceIndex")) + 1e8; 
if (!unigResult[index]) { // 去 重 
(array[ri++] = new String(index))._ = node; 
uniqResult[index] = 1; 
} 
} 
array.sort(); // 排 序 


while (ri) 
result[--ri] = array[ri]._; 
return result; 
} else { 
nodes.sort(sortOrder); // 排 序 
if (sortOrder.hasDuplicate) { // 去 重 
for (i = 1; i < nodes.length; i++) { 


if (nodes[i] === nodes[i - 1]) { 
nodes.splice(i--, 1); 





} 
} 
} 
sortOrder.hasDuplicate = false; // 还 原 
return nodes; 
} 
} 
function sortOrder(a, b) { 
if (a === b) { 
sortOrder.hasDuplicate = true; 
return 0; 
} // 现 在 标准 浏览 在 器 的 HTML 与 XML 好 像 都 支持 compareDocumentPosition 
if (!a.compareDocumentPosition || !b.compareDocumentPositio 
n) { 


return a.compareDocumentPosition ? -1 : 1; 


return a.compareDocumentPosition(b) & 4 ? -1 : 1; 





5.4.4 Weds 


选择 如 降低 了 JavaScript 的 入 行 门槛 ， 它 们 在 选 
择 元 系 时 都 很 随意 ， 随 心 所 欲 ， 一 级 级 地 往 上 加 ID 
类 名 ， 导 致 选择 符 非 弟 长 。 因 此 如 采 不 文 持 
querySelectorAll， 没 有 一 个 原生 API 能 承担 这 工 
作 。 因 此 我 们 通 间 使 用 正音 用 户 的 选择 符 进 行 切 
割 。 这 个 步骤 有 点 像 编 译 原 理 的 词法 分 析 ， 拆 分 出 














有 用 的 从 写法 出 来 。 





这 里 就 拿 Icarus 的 切割 器 来 举例 ， 看 它 是 怎么 
一 步 步 进化 ， 惑 知道 这 工作 需要 多 少 细致 ， 如 网 5- 
2 所 示 。 








图 5-2 


比如 ， 对 于 .tdl,div a,body ， 上 面 的 正则 可 
以 完美 将 它 分 解 为 如 下 数组 。 








然后 我 们 就 可 以 根据 这 个 符 写 法 进行 工作 。 由 
于 没有 指定 上 下 文 对 象 ， 就 从 document 开 始 ， 发 现 
第 一 个 是 类 选择 器 ， 可 以 
用 getElementsByClassName ， 如 果 没 有 原生 的 ， 


我 们 仿造 一 个 也 不 是 难事 。 然 后 是 并 联 选 择 器 ， 将 
上 面 得 到 的 元 素 放 进 结 采集 。 接 看 是 标签 选择 器 ， 
使 用 getElementsByTagName 。 接 着 发 现 是 后 代 选 
择 器 ， 这 里 可 以 优化 ， 我 们 可 以 预先 得 看 下 一 个 选 
择 器 群 组 是 什么 ， 发 现 是 通配符 选择 器 ， 因 此 继续 
使 用 getElementsByTagName 。 接 着 又 是 并 联 选 择 
妖 ， 将 上 面 结 末 放 入 结果 集 。 最 后 一 个 是 标签 选择 
ax, 1% Fo getElementsByTagName 。 最 后 是 去 重 
排序 。 








显然 有 了 切割 好 的 符号 ， 工 作 简 单 多 了 。 








但 没有 东西 一 开始 就 是 完美 的 ， 比 如 我 们 过 到 
这 样 一 个 选择 符 ，:nth-child(2n+1) 。 这 是 一 个 单 
独 的 子 元 素 过 滤 伪 类 ， 它 不 应 该 在 这 里 被 分 析 。 后 
面 有 专门 的 正则 对 它 的 伪 类 名 与 传 参 进行 处 理 。 在 
切 制 器 里 ， 它 能 得 到 的 最 小 词素 是 选择 器 ! 














于 是 切割 占 改 进 如 下 : 








// 让 小 括号 里 面 的 东西 不 被 切割 
var reg = /[\w\u00al-\uFFFF] [\w\u00al-\uFFFF-]*|[#.:\[—](?: [\w\u 


00al- 
\UFFFF-]|\((A\)]*\)|\])+2(2:\s*) [>+-,*](2:\s*) [\s+/g 





我 们 不 断 增加 测试 样 例 ， 就 会 发 现 越 来 越 多 问 
题 。 又 如 这 样 一 个 选择 符 : .tdi[aa='&gt;111']， 
属性 选择 器 被 拆 碎 了 ! 





正则 改进 如 下 : 

















// 确 保 属性 选择 器 作为 一 个 完整 的 词素 
var reg = /[\w\u00al-\uUFFFF] [\w\u00al-\uFFFF- ]*|[#.:](?: [\w\u00 
al-\uFFFF- 

JINS*NCLTAN) TEND FIND LANT TAN] | (22 a*) Lot, *](2:\s*)|\s+/g 

















对 于 td + div span, Wma A— AMES 
日 ， 会 叶 色 解析 错误 ， 我 们 确保 后 代 选 择 器 夹 在 两 
个 选择 器 之 则 。 





pO 


Ble “Sa FE as 2 OAT 5| EVE ze Ja Te 
TEAD mi peh A fH o 


// 55ER Es e E] 
var reg = /[\w\u00al-\uFFFF][\w\u00al-\uFFFF-]*|[#.:](?:[\w\u00 
al-\uFFFF- 

J INS#NC TAN) TEN) FINE TANT TANI (2 :a*) [>+-,*](?:\s*)|\s(?=[\w\u00a 
1- 





\UFFFF*#.[:1]/g 





OUR Ba te AE Be HTD ek Aa, AS AY EAS 
是 单独 一 个 正则 能 做 到 的 。 现 在 切割 右 已 经 被 我 们 
搞 得 相当 复杂 了 了， 维护 性 很 震 。 在 Mootools 等 引擎 
中 ， 里 面 的 正则 表达 式 更 加 复杂 ， 可 能 是 用 工具 生 
成 的 。 到 了 这 个 地 步 ， 我 们 残 需 要 转换 思路 ， 将 切 
割 器 改 为 一 个 图 数 处 理 。 当 然 ， 它 里 面 也 少不了 正 
则 表达 陈 。 正 则 是 处 理 字 符 串 的 利器 。 














var reg_split = 

/\[\w\u00ai -\UFFFF\-\* ]+| [#. : ] [\w\u00ai-\UFFFF-]+(?:\([4\])*\)) 
PI\NEDANT I] *\] | (e:\s*) [>+~, ](?:\s*) |] \s(?=[\w\u00ai1-\uFFFF*#. [:]) 
|A\st+/; 

var slim = /\s+|\s*[>+~,*]\s*$/ 


function spliter(expr) { 

var flag_break = false; 

var full = [];// 这 里 放置 切割 单个 选择 器 群 组 得 到 的 词素 ， 以 "，" 为 界 
var parts = [];// 这 里 放置 切割 单个 选择 器 组 得 到 的 词素 ， 以 关系 选择 器 为 





















































F 
do { 
expr = expr.replace(reg_split, function(part) { 
if (part === ",") {// 这 个 切割 器 只 处 理 到 第 一 个 并 联 选 择 器 
flag_break = true; 
} else { 
if (part.match(slim)) {// 对 关系 并 联 。 通 配 符 选 择 器 两 
边 的 空白 进行 处 理 



































// 对 parts 进 行 反 转 ， 因 为 div .aaa， 反 转 后 先 处 理 , aaa 
full = full.concat(parts.reverse(), part.re 





place(/\s/g, '')); 
































parts = []; 
} else { 
parts[parts.length] = part; 
} | 
return“"";// 去 掉 已 经 处 理 了 的 部 分 
}); 
if (flag_break) 


break; 
} while (expr) 
full = full.concat(parts.reverse()); 
Iful1[9] && full.shift();// 去 掉 开 头 第 一 个 空白 
return full; 











} 
var expr = " div > div#aaa,span" 
console.log(spliter(expr));//["div",">","#aaa", "div" ] 





当然 ， 这 个 相对 于 Sizzle1.8 与 Slick 等 引擎 的 切 
Blak UL, AMA. SUP WEI, FAA 


PAR EE EY IE WU ETA TY I A RRR AY RR BL 
机 理论 。 


5.4.5 RIERREN T E A FITI eR 
略 

己 经 介绍 过 属性 选择 器 的 7 种 形态 了 ， 但 属性 
选择 器 并 没有 这 么 人 简单。 在 W3C 讲 宁 对 属性 选择 器 
[att~=val] 提 到 一 个 点 ，val 不 能 为 空白 字符 ， 否 则 比 
较 值 flag (flag 为 val 与 元 素 实 际 值 的 比较 结果 ) 总 
返回 false。 如 果 用 querySelectorAl 测 试 一 下 属性 其 
他 形态 ， 我 们 会 得 到 更 多 类 似 结 











<!DOCTYPE html> 
<html> 
<head> 

<title> 属 性 选择 器 </title> 

<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 

<script> 

window.onload =function(){ 
console. log(document.querySelector("#test1[titl 





eara gjy; 
gemi 
eļ='']")); 
en=1"]")); 


console.1log(document .querySelector("#test1[titl1 
console.1log(document .querySelector("#test1[titl 
console.1log(document .querySelector("#test1[titl1 
console.1log(document .querySelector("#test1[titl1 
console.1log(document .querySelector("#test1[titl1 


console.10g("================================== 


console. log(document.querySelector("#test2[titl 
e='']")); 
console. log(document.querySelector("#test2[titl 
e~='']")); 
console. log(document.querySelector("#test2[titl 
eļ='']")); 
console.log(document.querySelector("#test2[titl 
e^='']")); 
console.log(document.querySelector("#test2[titl 
e$='']")); 
console. log(document.querySelector("#test2[titl 
e*='']")); 
} 
</script> 
</head> 
<body> 
<div title="" id="test1"></div> 
<div title="aaa" id="test2"></div> 
</body> 
</html> 


运行 结果 如 下 : 


:Null 





10000m iimmm nnn 
GF Ctr Ctr GIF GIF GIF GH GH GH CH GH G 


[object HTMLDivElement] 


[object HTMLDivElement] 








换言之 ， 只 要 val 为 空 ， 除 = 或 


= 外 ，flag 必 为 





false。 并 且 ， 对 于 非 =，!= 操 作 符 ， 如 果 取 得 值 为 


Po Ay 


空白 字符 ， 


flag 也 必 为 false。 


//https://github.com/jquery/sizzle/blob/2.3.0/src/sizzle.js#L11 


75-L1197 


"ATTR": function( name, operator, check ) { 


return function( elem ) { 
Sizzle.attr( elem, name ); 


var result = 


if ( result null 


return operator == 


I 
if ( 


l'operator ) { 
return true; 


} 


result += ""; 


return operator === 
operator "p=" 
operator 


一 一 一 "Az" 


wee 


operator == 


operator 
check : 
operator == 
+ W W ) . 
indexOf ( 
operator 
e( 0, check.length + 1 ) === 
check + "-" 
false; 


ength ) 


pace, 


" " ) 


}; 
}, 


" 
? 
? 
? 


? 


? 


"Į. 
oo 


? result === check : 

result !== check : 

check && result.indexOf( check 
check && result.indexOf( check 
check && result.slice( -check.1 


( " "+ result.replace( rwhites 


check ) > -1 : 
=== "|=" ? result === 


check || result.slic 





5.4.6 TOATA NI eS VLA 


子 元 素 过 滤 伪 类 是 CSS3 新 增 的 一 种 选择 器 ， 
比较 复杂 ， 这 里 单独 说 一 下 。 首 先 ， 我 们 要 将 它 从 
选择 符 中 分 离 出 来 ， 这 个 一 般 由 切割 器 搞定 。 然 后 
我 们 用 正则 将 伪 关 名 与 它 小 括号 里 的 传 参 分 解 出 
来 。 下 面 介 绍 一 下 Icarus 的 做 法 。 





var expr = ":nth-child(2n+1)", 
rsequence = /A([#\.:]|\[\s*]((?: [-\w] | [4\x00-\xaO] | \\.)+)7, 
rpseudo = ZAN (\s*("( P"O" CIATED LEAN TEAC ESN OY) TEN) 
)?)\s*\)/, rBackslash = /\\/g, 
// 这 里 把 伪 类 从 选择 符 里 分 解 出 来 
match = expr.match(rsequence); //[":nth-child",":", "nth-ch 





ild" | 
expr = RegExp.rightCcontext;// 用 它 左边 的 部 分 重 写 expr--> "(2n+1) 

















key = (match[2] || "").replace(rBackslash,"");// 去 掉 换 行 符 
key--> "nth-child" 
switch (match[1]) { 
case "#": 
//ID 选 择 器 略 
break; 
case ".": 
// 类 选择 器 略 
break; 
case "i"; 
// 伪 类 We 
tmp = Icarus.pseudoHooks[key]; 
//Icarus.pseudoHooks 里 面 放置 我 们 所 有 能 处 理 的 伪 类 
if (match = expr.match(rpseudo)) { 
expr = RegExp.rightContext;// 继 续 取 它 左 边 的 部 分 重 写 expr 
if ( !! ~key.indexof("nth")) {// 如 果 是 子 元 素 过 滤 伪 类 
args = parseNth[match[1]] || parseNth(match[1]) 
;// 分 解 小 括号 的 传 参 
































} else { 
args = match[3] || match[2] || match[1] 
} 


break 
default: 
// 属 性 选择 器 略 


break; 








这 里 有 个 小 技巧 ， 我 们 需要 不 断 把 处 理 过 的 部 
分 从 选择 符 中 去 挥 。 一 般 的 选择 占 引 获 是 使 用 expr 
= expr.replace(reg, "") 进行 处 理 。Icarus 是 巧妙 
地 使 用 正则 的 RegExp.rightContext 进 行 复写 ， 将 小 





括号 里 面 的 字符 串 取 得 后 我 们 通过 parseNTH 进 行 加 
工 ， 将 数字 1、4， 单 词 even、odd、-n + 1 等 各 种 形 
态 转 换 an+b 的 形态 。 





function parseNth(expr) { 
var orig = expr 
expr = expr.replace(/4\+|\s*/g, ''); // 清 除 无 用 的 空白 
var match = (expr === "even" && "2n" || expr === "odd" && " 
2nt+i" || !/\D/.test(expr) && "On+" + expr || expr).match(/(-?)( 
\d* )n([-+]?\d*)/); 
return parse_nth[orig] = { 
a: (match[1] + (match[2] || 1)) - ©, 
b: match[3] - 0 





}; 
} 


[L SCRE 


parseNth 是 一 个 缓存 函数 ， 这 样 承 能 避免 重复 
解 林 ， 提 高 引擎 总 体 性 能 。 


我 们 再 来 看 一 下 an+b 的 匹配 算法 ，a 与 b 都 是 整 
数 ， 可 能 是 正 数 、 负 数 、 零 。 最 简单 的 情形 是 a 为 
零 ，b 随 意 时 。 我 们 得 到 此 元 素 的 父 厄 点 下 的 所 有 
子 元 素 ， 即 els = el.parentNode.children, A} A VLAE 
算法 浓缩 成 ! 为 els[b-1] 。 因 为 子 元 素 过 滤 伪 类 
中 的 传 参 是 以 1 开始 ， 因 此 需要 减 1。 














如 条 a 为 1，b 为 0 的 情况 ， 这 也 很 徐 单 ， 意 味 痢 
所 有 和 孩子 都 匹配 ， 直 接 返 回 true 束 行 。 如 条 b 为 0 
时 ， 比 如 2n 束 是 取 孩 子 中 的 索引 值 为 偶数 的 个 体 ， 
假设 对 引 值 为 index， 那 么 (index + 1) % 2 == 0 就 能 
POAC HSE, FAUCET As Ay (index + 1) % a 


= 二 0% 





再 看 b 不 为 0 的 情况 ， 比 如 :nth-child(3n+1)， 一 
个 拥有 10 个 孩子 的 节点 ， 它 的 索引 值 中 第 0、3、 
6、9 的 孩子 被 匹配 ， 即 (index + 1- 1) % 3 == 0 时 被 
匹配 ， 因 此 匹配 公式 为 (index + 1 - b) % a == 0 





不 过 当 b > a 时 ， 又 有 新 状况 ， 比 如 :nth- 
child(3n+4)， 还 是 那个 拥有 十 个 孩子 的 节点 ， 这 时 
只 有 索引 值 为 3、6、9 的 孩子 被 匹配 ， 第 一 个 孩子 
(0+1-4)% 3 也 是 等 于 去， 这 时 我 们 需要 判定 商 是 
否 大 于 负数 了 。 由 于 index 总 是 要 加 1， 那 么 我 们 一 
开始 把 起 点 和 弄 成 1， 那 么 就 省 事 多 了 。 总 结 上 面 的 
分 析 ， 我 们 把 索引 值 与 b 的 差 作为 一 个 变量 diff， 那 
么 匹配 规则 为 diff % a == © &amp;&amp; diff/ a 








&gt:= 0. 





我 们 再 来 看 nth-of-type， 它 其 实 就 是 对 父 元 素 
的 child 进 行 分 类 ， 分 类 标签 是 元 系 的 tagName。 然 











后 只 要 目标 元 素 的 索引 值 〈 也 是 从 1 开始 ) 匹配 上 
面 的 公式 束 行 了 。 











从 性 能 上 考量 ， 并 不 是 每 种 子 元 了 系 过 滤 伪 类 都 
需要 通过 这 种 比较 索引 值 的 方式 实现 ， 我 们 可 以 变 
通 一 下 。 比 如 说 ，:first-child， 我 们 看 一 下 手头 上 的 
这 个 元 素 是 否 存在 兄长 ， 处 
即 previousElementSibling ， 存 在 就 返回 false 过 滤 
皖 。:fast-child 也 是 基于 相同 的 思路 进行 过 
滤 。:only-child， 需 要 判定 目标 元 素 是 否 为 其 父 杀 
的 唯一 一 个 子 元 素 ， 需 要 同时 判定 是 否 存 
在 previousElementSibling 与 nextElementSibling 。 
当然 ， 现 实 是 残酷 的 ， 为 了 兼容 旧版 本 万 ， 我 们 一 
般 用 previousSibling、nextSibling 加 nodeType 是 人 否 
1 进行 判定 。 














但 对 于 :nth-child, :nth-last-child, :nth-of-type, 
:nth-last-of-type 束 不 行 了 ， 我 们 也 不 可 能 每 匹配 一 


个 元 又 就 把 它 在 兄 第 中 或 tagName 分 组 中 的 索引 值 
计算 一 所。 因此 以 空间 换 时 间 这 万 能 药 再 次 被 提出 
来 了 ， 我 们 将 缓存 仓库 设置 在 父 节 点 上 ， 然 后 把 它 
所 有 孩子 的 索引 值 或 tagName 分 组 一 次 性 放 在 上 
面 ， 吏 可 以 在 一 次 得 找 过 程 中 反应 利用 此 组 在。 至 
于 如 何 实现 可 参看 Icarus、Sizzle1.8+、Slice 等 引 
擎 ， 代 码 比 较 长 ， 在 此 不 再 贴 出 来 。 











5.5 Sizzley| 擎 


jQuery 最 大 的 特点 是 其 选择 器 ，jQuery1.3 时 开 
台 列 装 其 Sizzle 引 擎 。Sizzle 引 擎 与 当时 主流 的 引擎 
大 不 一 样 ， 人 们 说 它 是 从 右 到 无 选择 《虽然 也 不 
对 ， 只 能 说 大 致 方向 如 此 ) ， 速 度 远 胜 当时 的 选择 
Ait o 


Sizzle 当 时 的 几 大 特点 如 下 。 
(1) 允许 以 关系 选择 器 开头 。 


(2) FO VER i as SE PE a o 








(3) 大 量 的 目 定义 伪 类 ， 比 如 位 置 伪 类 Ceq, 
‘first, :even...... ) 、 内 容 伪 类 (:contains) 、 包 含 盆 
类 (Chas) 、 标 签 伪 类 (:radio, :input, :text, 


:file...... ) 、 可 见 性 伪 类 (:hidden,:visible〉。 


(4) 对 结果 进行 去 重 ， 以 元 素 在 DOM 树 的 位 
置 进 行 排序 ， 这 样 与 未 来 出 现 的 querySelector 行 为 
一 致 。 


显然 ， 一 下子 搞 出 这 么 多 东西 ， 不 是 一 朝 一 夕 
的 事 ， 说 明 John Resig 已 经 研发 了 很 久 。 当 时 Sizzle 
的 版 本 号 为 0.9.1， 代 码 风 格 与 jQuery 库 大 不 一 样 ， 
非常 整齐 清晰 。 这 个 风格 一 直 延 续 到 jQuery1.7.2， 
Sizzle 版 本 号 也 跟 上 为 1.7.2。 在 jQuery1.8 或 者 说 
Sizzle1.8 中 ， 它 风格 大 变 ， 衣 选 里 面 的 正则 是 通过 
编译 得 到 的 ， 以 求 更 加 准确 ， 结 构 也 异常 复杂 ， 开 
始 走 EXT 那 样 的 编译 函数 的 路 子 ， 以 求 通过 多 种 组 
存 手 段 提高 查找 速 度 和 匹配 速度 。 











由 于 Sizzle1.8 加 入 编译 机 制 后 ， 代 码 变 得 非常 
复杂 难 懂 ， 分 析 起 来 篇 幅 太 长 了 ， 我 们 还 是 选用 
1.7.2 来 讲解 Sizzle 的 主流 程 ， 如 图 5-3 所 示 。 






no 


是 否 存在 种 子 集 是 否 支 持 ID/ 标签 


Sizzle.select 


no 


/类 /QSA 选择 器 o 


yes 


使 用 原生 API 查找 元 素 












得 到 结果 集 《〈 要 去 重 ) 





通过 push 转换 为 原生 数组 


得 到 结果 集 〈 不 要 去 重 ) 
图 5-3 


Sizzle.select 里 的 流程 ， 如 网 5-4 所 示 。 


开始 


是 否 有 种 子 集 w IEJ 







最 左边 是 否 有 ID 


切换 更 近 的 选择 起 点 


没有 新 起 点 


取得 种 子 集 


yes 









| 编译 并 过 小 
返回 结果 集 ( 去 重 ) 


图 5-4 
Sizzle 的 整体 结构 如 下 。 


(1) Sizzle 主 函数 ， 里 面包 
内 部 循环 调用 主 查 找 函 数 ， 主 过 滤 


售 选 择 符 的 切割 ， 
PAB, Ha EZ 





if 


(2) 其 他 辅助 函数 ， 如 uniqueSort、matches、 


matchesSelector. 


(3) Sizzle.find 主 查找 函数 。 





(4) Sizzle.filter 主 过 滤 函 数 。 


(5) Sizzle.selectors 包 含 各 种 匹配 用 的 正则 、 
过 滤 用 的 正则 、 分 解 用 过 的 正则 、 预 处 理 函 数 、 过 
Ve PIAL 





C6) 根据 浏览 器 的 特征 设计 makeArray、 


sortOrder、contains 等 方法 。 


(7) 根据 浏览 器 的 特征 重 写 Sizzle.selectors 中 
TARRA IERA ARAT o 


(8) ÆN) wa arx frquerySelectorAll, IKA H 
它 重 写 Sizzle， 将 原来 的 Sizzle 作 为 后 备 方案 包 囊 在 
#1 Sizzle Œ M . 





(9) 其 他 辅助 函数 ， 如 isXML、posProcess。 





在 jQuery 1.8 后 ， 加 入 tokenize〈 就 是 第 一 步 提 
BETO) ， 然 后 加 入 编译 机 制 ， 编 译 机 制 实 
际 上 束 古 根据 我 们 切割 好 的 字符 的 类 型 得 到 一 大 堆 
几 配 函数 ， 然 后 将 它们 转换 为 一 个 柯 里 化 也 
数 superMatcher ， 然 后 再 将 这 些 字 符 作 为 传 参 来 
求 值 。 上 面 的 匹配 函数 束 包 括 六 jQueryl.7 的 主 碍 找 

pe 2a Sj E EYE PKI SY 


<a>https://github.com/jquery/sizzle/blob/1.7.2/sizzle.js</a> 





var Sizzle = function(selector, context, results, seed) { 
// 通 过 短路 运算 符 ， 设 置 一 些 默认 值 
results = results || []; 
context = context || document; 
// 备 份 ， 因 为 context 会 被 改写 ， 如 果 出 现 并 联 选 择 器 ， 就 无 法 区 别 当 前 节点 是 对 应 


哪 一 个 content 














var origContext = context; 
// 上 下 文 对 象 必须 是 元 素 节 点 或 文档 对 象 
if (context.nodeType !== 1 && context.nodeType !== 9) { 
return []; 








} 
// 选 择 符 必须 是 字符 串 ， 且 不 能 为 衬 
if (!selector || typeof selector !== "string") { 
return results; 
} 





var m, set, checkSet, extra, ret, cur, pop, i, 
prune = true, 
contextXML = Sizzle.isXML(context), 
parts = [], 
soFar = selector; 
// 下 面 是 切割 器 的 实现 ， 每 次 只 处 理 到 并 联 选择 器 ，extra 留 给 下 次 递归 自身 时 作 传 参 
// 不 过 与 其 他 引擎 的 实现 不 同 的 是 ， 它 没有 一 下 子 切 成 选择 器 ， 而 是 切 成 选择 器 组 与 关 
系 选择 器 的 集合 
// 比 如 body div > div:not(.aaa),title 
// 将 会 得 到 parts 数 组 : ["body","div",">", "div:not(.aaa)"] 
// 后 代 选 择 器 虽然 被 忽略 了 ， 但 在 循环 这 个 数组 时 ， 它 默认 每 两 个 选择 器 组 中 一 定 夹 着 
关系 选择 器 
// 不 存在 就 放 在 后 代 选 择 器 到 那个 位 置 上 
do { 
chunker.exec(""); // 这 一 步 主要 是 将 chunker 的 lastIndex 重 置 ， 
当然 直接 设置 chunker. 















































//lastIndex 效 果 也 一 样 
m = chunker.exec(soFar); 
if (m) { 
soFar = m[3]; 
parts.push(m[1]); 
if (m[2]) { A// 如 果 存 在 并 联 选择 器 ， 就 中 断 
extra = m[3]; 
break; 





} 


} 
} while (m); 
He 


| 
接 下 来 有 许多 分 文 ， 分 别 是 对 ID 与 位 置 伪 类 进 
行 优 化 的 。 我 们 暂时 跳 过 它们 ， 看 男 外 几 个 重要 概 


念 : ARRA PTE WRR. BAB ZRT 
绍 过 ,但 是 这 里 是 结合 Sizzle 源 人 码 讲 解 的 。 











查找 函数 就 是 Sizzle.selecters.find 下 的 几 种 函 
数 ， 常 规 情况 下 有 ID、TAG、NAME 三 个 ， 如 果 浏 
Tite x + QetElementsByClassName, 842A Class% 
数 。 正 如 笔者 前 面 所 介绍 的 那样 ， 
getElementByld. getElementsByName, 
getElementsByTagName ll getElementsByClassName 
Nese aE, BEEREN bi ak eh eA 
bug, PAE PUA er $k ee Cri S — ERTS SET 2 , 
不 支持 则 返回 undefined， 其 他 则 返回 数组 或 
NodeList. 








PFR, WR ET BW AN ae PE as Zl 4 A) 
元 素 集合 ， 比 如 说 div.aaa span.bbb ， 最 右边 的 选 
择 器 组 就 是 "span.bbb"。 这 时 引 敬 会 根据 浏览 絮 的 
支持 情况 选择 getElementsByTagName 或 
getElementsClassName{#-#!|— Hu, Aa Ait 
className 或 tagName 进 行 过 滤 ， 这 时 得 到 的 集合 残 
是 种 子 集 。Sizzle 的 变量 名 seed 就 体现 了 这 一 点 。 


IRIT ，Sizzle 源 码 的 变量 名 为 checkSet。 当 
我 们 取得 种 子 集 后 ， 不 动 种 子 集 ， 而 是 将 种 子 集 复 
制 一 份 出 来 ， 这 吏 是 映射 集 。 种 子 集 是 由 一 个 选择 
颖 组 选 出 来 的 ， 这 时 选择 符 不 为 室 ， 必 然 往 左 就 是 
关系 选择 器 。 关 系 选择 器 会 让 引擎 去 选取 其 兄长 或 
父亲 (具体 操作 见 Sizzle.selectors.relative 下 的 四 大 
RARO ， 把 这 些 元 系 置 换 到 候选 集 对 等 的 位 置 上 。 
然后 到 下 一 个 选择 右 组 时 ， 束 是 纯 过 小 操作 。 主 过 
滤 函 数 Sizzle.filter 会 调用 Sizzle.seletors 下 N 个 过 滤 函 
数 对 这 些 元 素 进行 检测 ， 将 不 符合 的 元 素 蔡 换 为 








false。 因 此 到 最 后 要 去 重 排序 时 ， 映 射 集 是 一 个 包 
含 布尔 值 与 元 系 节 所 的 数组 (true 值 也 在 上 面 步 又 
au) eee oe ee 








ERASED. PP SR ee ot A AE if a HOR 
的 。 首 先 ， 通 过 Sizzle.find 得 到 一 个 大 体 的 结果 。 
然后 通过 Sizzle.filter， 传 入 最 右 的 那个 选择 器 组 独 
余 的 部 分 作 参 数 ， 缩 少 范 围 。 





// 这 是 针对 最 左边 的 选择 器 组 存在 ID 做 出 的 优化 

var ret = Sizzle.find(parts.shift(), context, contextXML); 
context = ret.expr ? Sizzle.filter(ret.expr, ret.set)[O] : ret. 
set[0]; 


ret = seed ? { 

expr: parts.pop(), 

set: makeArray(seed) 

// 这 里 会 对 ~, + 进行 优化 ,直接 取 它 的 上 一 级 做 上 下 文 

// 处 理 一 个 上 下 文 对 象 胜 过 对 付 N 个 上 下 文 
} : Sizzle.find(parts.pop(),parts.length === 1 && 

(parts[0] === "~" || parts[0] === "+") && context.parentNo 

de ? 

context.parentNode : context, contextXML); 


























set = ret.expr ? Sizzle.filter(ret.expr, ret.set) : ret.set; 





我 们 是 先 取 span 还 是 取 .aaa 呢 ? 这 里 有 个 准 


WW, ARRIE TAY PRN Ses. E AHH, 
REWIR, AA el FA SY PRI BLT BC 
HURD, al FA PRIA RAR, LA GE A AAK 
RUE FA UT te GEN HERE EZ, MT RE AS HE m | SE 
的 选择 速度 。 为 了 达到 此 目的 ， 这 里 做 了 个 优化 ， 
原生 选择 器 的 调用 顺序 被 放 到 一 个 叫 
Sizzle.slectors.order 的 数组 中 。 对 于 陈旧 的 浏览 妖 ， 
其 顺序 为 DD、NAME、TAG; 对 于 支持 
getElementsByClassName 的 济 贤 硕 ， 其 顺序 为 ID、 
CLASS、NAME、TAG。 因 为 ID 至 多 返回 一 个 元 素 
节点 ，className 与 样式 尽 奶 相关 ， 不 是 每 个 元 么 
都 有 这 个 类 名 。name 属 性 市 来 的 限制 可 能 比 
className 更 大 ， 但 用 到 的 机 率 比 较 少 ， 而 tagName 
可 排除 的 元 素 则 更 少 了 。 那 么 Sizzle.find 束 会 根据 
上 面 的 数组 ， 取 得 它 的 名 字 依 次 调用 
Sizzle.leftMatch 下 对 应 的 正则 ， 从 最 右 的 选择 右 组 
中 切 下 需要 的 部 分 ， 将 换行 从 处 理 挥 ， 通 过 四 大 但 
找 函 数 得 到 一 个 粗粮 的 节点 集合 。 如 末 运 气 太 差 ， 

















fit £1 G0 [href=aaa]: visible 这 样 的 选择 符 ， 那 么 只 
有 把 文档 中 的 所 有 节点 作为 结果 返 








Sizzle.find = function(expr, context, isXML) { 
var set, i, len, match, type, left; 


if (!expr) { 
return []; 
} 


for (i = 0, len = Expr.order.length; i < len; i++) { 

type = Expr.order[i]; 

// 取 得 正则 , 匹 想 出 需要 的 ID、CLASS、NAME、TAG 

if ((match = Expr.leftMatch[type].exec(expr))) { 
left = match[1]; 
match.splice(1, 1); 
// 处 理 换行 符 
if (left.substr(left.length - 1) !== "\\") { 

match[1] = (match[1] || "").replace(rBackslash, 


























a D 
set = Expr.find[type](match, context, isXML); 


// 如 果 不 为 undefined, 那么 去 掉 选 择 器 组 中 用 过 的 部 分 
if (set != null) { 
expr = expr.replace(Expr.match[type], ""); 

















break; 
} 
} 
} 
} 
if (!set) { // 没 有 ,寻找 该 上 下 文 对 象 的 所 有 子孙 
set = typeof context.getElementsByTagName !== "undefine 
d" ? 
context.getElementsByTagName("*") : []; 
} 
return { 
set: set, 
expr: expr 
}; 


经 过 主 碍 找 函 数 处 理 后 ， 我 们 得 到 一 个 初步 的 
结 末 ， 这 时 最 右边 的 选择 器 组 可 能 还 有 残余 。 比 如 
div span.aaa 可 能 余下 div span, div .aaa.bbb 
或 者 可 能 余下 div .bbb ， 这 个 转交 主 过 滤 函 数 
Sizzle.filter 函 数 处 理 。 它 有 两 种 不 同 的 功能 ， 一 是 
不 断 缩小 集合 的 个 数 ， 构 成 种 子 集 返 回 ; 男 一 种 是 
将 原 集合 中 不 匹配 的 元 系 置 换 为 false， 这 个 根据 它 
的 第 三 个 传 参 inplace 而 定 。 

















Sizzle.filter = function(expr, set, inplace, not) { 
// 用 于 生成 种 子 集 或 映射 集 ， 这 视 第 三 个 参数 而 定 
//expr: 选择 符 
//set: 元 素数 组 
//inplace:undefined，null 时 进入 生成 种 子 集 模式 , true 时 进入 映射 集 模 








//not: 一 个 布尔 值 ,来源 自 取 反选 择 器 
var match, anyFound, 
type, found, item, filter, left, 
i, pass, 
old = expr, 
result = [], 
curLoop = set, 
isXMLFilter = set && set[0] && Sizzle.isXML(set[0]); 


while (expr && set.length) { 
for (type in Expr.filter) { //ID, TAG, CLASS, TAG, CHILD, PO 
S, PSEUDO 
if ((match = Expr.leftMatch[type].exec(expr)) != nu 


11 && match[2]) { 





// 切 割 出 相应 的 字符 串 , 作为 传 参 放 进 filter 里 面 

filter = Expr.filter[type]; 

left = match[1]; 

//ID He ["#aaa","","aaa"] 

//CLASS --> [".aaa","","aaa"] 

//TAG--> ["div","", "div" ] 

//ATTR- -> ["[aaa=ggg]", "", "aaa", "A=", unde 


fined, undefined, "ggg"] 


oe "even" | 


//CHILD--> [":nth-child(even)", "", "nth-child" 


//POS--> f":eq(2)", ey "eq", "2" | 
//PSEUDO-->[":not(.aaa)", "", "not", "", "aaa" 


anyFound = false; 
match.splice(1, 1); 


if (left.substr(left.length - 1) === "\\") { 
continue; 

} 

if (curLoop === result) { 


result = []; 


} 
if (Expr.preFilter[type]) { 
match = Expr.preFilter[type](match, curLoop 


, inplace, result, not, 


bb 


UE 


们 同时 也 能 被 











ter .PSEUDO 处 理 











isXMLFilter ); 
// 这 里 会 对 传 参 进行 加 工 , 比如 #aaa 得 到 aaa， .bbb 得 到 b 














// 出 于 优化 需要 , 它 会 在 Expr .preFilter .CLASS 进 行 过 


// 而 不 用 等 于 Expr .filter .ClASS 
// 男 外 ,针对 CHILD，POS, 它 会 两 入 进入 这 个 循环 ,因为 它 














//Expr .LeftMatch.PSEUD0 匹 配 , 但 它 不 想 被 EXxpr .fil 


// 于 是 直接 continue 

if (!match) { //CLASS 
anyFound = found = true; 

} else if (match === true) { //CHILD, POS 
continue; 


} 


} 

if (match) { 
//curLoop 为 一 个 映射 集 , 里 面包 含 false，true 
for (i = 0; 





op); 


进去 


(item = curLoop[i]) != null; i++) { 
if (item) { 
found = filter(item, match, i, curLo 


pass = not ^ found; 
// 在 映射 集 模式 下 , 将 不 匹配 的 元 素 置换 为 false 
if (inplace && found != null) { 

















if (pass) { 
anyFound = true; 
} else { 


curLoop[i] = false; 


} 
// 否 则 result 为 我 们 的 种 子 集 , 把 匹配 者 放 





} else if (pass) { 
result.push(item); 
anyFound = true; 


} 


if (found !== undefined) { 

if (!inplace) { 

curLoop = result; // 重 写 种 子 集 为 curLoop 
} 
// 削 减 选择 符 直 到 变 为 空 字符 串 
expr = expr.replace(Expr.match[type], ""); 
if (!anyFound) { 

return []; 








} 


break; 


} 


// 如 果 到 最 后 正则 表达 式 也 不 能 改动 选择 符 ， 说 明 它 有 问题 
if (expr === old) { 
if (anyFound == null) { 
Sizzle.error(expr); 
} else { 
break; 





J 


old = expr; 


return curLoop; 


}; 





符 到 我 们 把 最 右边 的 选择 器 组 的 最 一 个 字符 都 





去 掉 后 ， 种 子 集 宣 告 完成 ， 然 后 处 理 下 一 个 选择 器 
组 ， 并 将 种 子 集 复 制 一 下 ， 生 成 映射 集 。 在 关系 选 
择 器 4 个 对 应 函数 ， 它 们 位 于 Sizzle. selectors. 
relative 命名 空间 下 ， 只 是 将 映射 集 里 面 的 元 系 置 换 
为 它们 的 郧 长 父 莱 ， 个 数 是 不 变 的 。 因 此 映射 集 与 
种 子 集 的 数量 总 是 相当 。 另 外 ， 这 4 个 函数 内 部 也 
在 调用 Sizzle.filter 函 数 ， 它 的 inplace 参 数 为 tue， 走 
映射 集 的 逻辑 。 








while (parts.length) { 
cur = parts.pop(); // 取 得 关系 选择 器 
pop = cur; 








if (!Expr.relative[cur]) { 
cur = "";// 如 果 不 是 则 默认 为 后 代 选 择 右 
} else { 








pop = parts.pop(); // 取 得 后 代 选 择 器 前 面 的 子 选择 器 群集 


if (pop == null) { 
pop = context; 
} 


Expr.relative[cur](checkSet, pop, contextXML); // 根 据 其 他 4 种 
RASA RAN BT TT EE 








// 得 到 诸如 [ [object HTMLDivElement] ,false, false, [object HT 
MLSpanElement] ] 的 集合 
} 





> 











最 后 一 步 就 是 根据 映射 集 甄选 候选 集 。 


for (i = 0; checkSet[i] != null; i++) { 
if (checkSet[i] && checkSet[i].nodeType === 1) { 
results.push(set[i]); 
} 
} 





如 琳 存 在 并 联 选 择 费 ， 那 束 再 调用 Sizzle 主 函 
数 ， 把 得 到 的 两 个 结果 合并 去 重 。 
if (extra) { 


Sizzle(extra, origContext, results, seed); 
$izzle.uniqueSort(results); 


} 








IE EVIE © PER ENR PED a as FY ap PEE 
行 优 化 或 调整 的 部 分 。 比 如 IE6、IE7 下 的 
getElementById 有 bug， 需 要 重 写 Expr.find.ID 与 
Expr.filterID 。 下 6 一 下 8 下 ，Array.prototype.slice.call 


WIE) FlNodeList, 772222 makeArray. IE6~ 
IE8，getElementsByITagName(“*”) 会 混 林 注释 节 
点 ， 需 要 重 写 Expr.find.TAG。 如 果 浏 览 器 支持 
querySelectorAll， 那 么 需要 重 写 个 Sizzle。 


if (document.querySelectorAll) { 
(function() { 
var oldSizzle = Sizzle, 
div = document.createElement("div"), 
id = "__sizzle__"; 
div.innerHTML = "<p class='TEST'></p>"; 
/VSafari 在 怪异 模式 下 querySelectorA11 不 能 工作 ,中止 重 写 
if (div.querySelectorAll && div.querySelectorAll(".TEST 
")., length === 0) { 
return; 


} 


Sizzle = function(query, context, extra, seed) { 
// 这 里 省 略 N 行 


// 更 好 的 利用 querySelector 实 现 的 选择 器 引擎 
return oldSizzle(query, context, extra, seed); 


ti 

// 将 原来 的 方法 重新 绑 定 到 新 Sizzle 函 数 上 

for (var prop in oldSizzle) { 
Sizzle[prop] = oldSizzle[prop]; 
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// release memory in IE 
div = null; 


HO; 





一 旦 用 上 querySelectorAll, Sizzle A’) t Ae wt ME KE 


ee 


5.6 ”总结 





ESE DNL SHE AS TES AY) 20 E as Sl ZEEE Hh MEA, RF 
Fall fee EE PE BE AQ ST EFCSS3TAZR, LAE EIXE. 
在 querySelectorAll 被 普 过 文 持 的 今日 ， 特 别 是 移动 
问 项 目 ， 根 本 没有 必要 用 Sizzle 这 样 专业 的 引擎 。 
zepto.js 就 很 取 巧 地 直接 用 querySelectorAl1， 只 有 几 
行 代 码 ， 但 Sizzle 则 是 1900 行 之 巨 。 如 果 一 定 要 说 
学 习 写 一 个 选择 器 有 什么 意义 ， 那 就 是 各 种 设计 模 
式 的 实验 场 了 ! Sizzle A ia EL, SEE 
读 通 的 话 ， 你 的 JavaScript 功 力 会 提升 几 个 档次 。 








如 果 一 定 要 鳞 容 IE6， 但 你 又 用 不 上 什么 复杂 
Wistar, ALA we PIRSA aa BA 
TEA Ua aH A” 2825 KZ o 





function $(query) { 
var res = [] 
if (document.querySelectorAll) { 
res = document.querySelectorAll(query) 
} else { 


var firstStyleSheet = document.styleSheets[0] || docume 
nt.createStyleSheet() 
query = query.split(',') 
for(var i = 0, len = query.length; i < len; i++) { 
firstStyleSheet.addRule(query[i], 'Hack:ie') 
} 


for (var i = 0, len = document.all.length; i < len; i++ 


var item = document.all[i] 
item.currentStyle.Hack && res.push(item) 


firstStyleSheet.removeRule(0) 


var ret = [] 

for(var i = 0, len = res.length; i < len; i++){ 
ret.push(res[i])s 

} 


return ret 





[1] ”现在 所 有 新 的 浏览 器 都 支持 这 个 特性 。 


[2] ”IE6-8 支 持 使 用 <comment> 我 是 注释 
</comment>、<% 我 是 注释 %>、<! 我 是 注释 > 这 
个 所 有 浏览 右 都 文 持 ， 但 我 们 通 弟 是 被 教导 使 用 
<! en a lena >) 这 3 种 方式 定义 
注释 节点 。 因 此 ， 我 们 不 和 觉 童 间 束 创建 了 许多 注释 
oe 


/NO 





[3] eee READE, CARS eS 
J: 





[4] sort MA bia ze KA, ecm iA A 
体 规定 ， 对 稳定 性 也 没有 要 求 ，15.4.4.44 
Array.prototype.sort(comparefn) 

The elements of this array are aorted.The sort is not 
necessarily stable (that is,elements that compare equal 
do not necessarily remain in their original order). 

Hk, Dal Satan) Te SE HE, ACA AN Te] EE A E 
法 实现 sort 方 法 。 各 个 算法 的 稳定 性 不 同 而 导致 了 
结果 的 差 寞 。Firefox2 采 取 了 不 稳定 的 堆 排 序 ， 
firefox3 采 用 了 稳定 的 归并 排序 ，ie 速 度 较 慢 ， 有 具体 
算法 不 明 ， 可 能 为 冒 泡 或 者 插入 排序 ， 而 chrome 则 
为 了 最 大 效率 ， 采 用 了 两 种 算法 : 


Chrome use quick sort for a large dataset( > 22),and for 








a smaller dataset ( < =22) chrome use insert sort but 


modified to use binary search to find insert point,so 


traditionally insert sort is stable,but chrome make it 
faster and unstable,in conclusion chrome’ s sort is 


quick and unstable 





J 
BE CREATIVE! 


DOM##(E ERATA Im LER AEB ot, F 
中 元 素 节 点 的 操作 又 占 其 50% 以 上 。 由 于 MVVM 的 
流行 ， 让 用 户 直接 操作 DOM 的 机 会 越 来 越 少 ， 
此 之 前 jQuery 的 链 式 操作 我 将 全 部 删 控 ， 狐 版 本 将 
集中 介绍 如 何 实 现 CRUD。 没 错 ，CRUD 就 是 数据 


库 经 名 所 说 的 那个 CRUD， 我 们 可 以 将 整个 DOM 树 
作为 一 个 大 的 数据 表 ， 然 后 对 它们 进行 增删 改 碍 。 
HS ako OATES ITA SS, ARSE AA 
file. Er SURE, Ae Seth — es H D REFE o 


6.1 节点 的 创建 


浏览 器 提供 了 多 种 手段 创建 API， 从 流行 度 来 
看 ， 依 次 是 document.createElement、innerHTML、 


insertAdjacentHTML、 createContextualFragment. 


document.createElement 基 本 不 用 说 什么 ， 它 传 
入 一 个 标签 名 ， 然 后 返回 此 类 型 的 元 素 和 点 ， 并 且 
对 于 浏览 喜 还 不 文 持 的 标签 类 型 ， 它 也 能 成 功 返 
回 ， 这 成 了 后 来 了 正 6 一 正 8 支持 HIML5 新 标签 的 救命 
稻草 。 在 下 6 一 下 8 中 ， 它 还 有 一 种 用 法 ， 能 允许 用 
户 连 同属 性 一 起 生成 ， 比 如 document . 
createElement("<div id=aaa></div>") 。 hea 
JUFAE a rname le ME Winputiframesvt a, AA 
IE6 一 IE7 下 这 两 种 元 素 的 name 属性 是 只 读 的 ，” 
能 修改 。 











//http://thunderguy.com/semicolon/2005/05/23/setting-the-name-a 
ttribute-in-internet-explorer/ 


function createNamedElement(type, name) { 

var element = null; 

// Try the IE way; this fails on standards-compliant browse 
rs 

try { 

element = document.createElement('<' + type + ' name="' 

+ name + Pit Ye 

} catch (e) { 


if (!element || element.nodeName != type.toUpperCase()) { 
// Non-IE browser; use canonical method to create named 
element 
element = document.createElement(type); 
element.name = name; 
} 


return element; 





innerHTMLASK EIEN AAA KI, SL eae HP 
化 了 。JQuery 1.0 就 开始 发 掘 innerHTML 的 潜能 ， 这 





不 但 是 因为 innerHTMEL 的 创建 效率 至 少 比 
createElement 高 2 一 10 倍 不 等 ， 还 因为 innerHTML 能 
一 下 子 生 成 一 大 堆 节 点 。 这 与 jQuery 推 肝 批量 操作 
的 宗旨 不 谋 而 合 。 但 innerHTML 存 在 兼容 性 问题 ， 
比如 IE 会 对 用 户 字 符 串 进 行 trimLeft 操作 ， 本 意 ; 
智能 去 挥 无 用 的 空白 ， 但 Firefox 等 则 认为 要 忠于 用 
性 输入， 对 应 位 置 要 生成 文本 节点 。 

















window.onload = function() { 
var div = document.createElement("div"); 
div.innerHTML = " <b>1</b><b>2</b> " 
alert(div.childNodes.length); //IE6~IE8 弹 出 3， 其 他 4 


alert(div.firstChild.nodeType) //IE6 弹 出 1， 其 他 3 
} 








IE 下 有 些 元 素 节点 的 innerHTML 是 只 读 的 ， 
重 写 innerHTML 会 报错 ， 这 就 导致 我 们 在 动态 插入 
节点 时 不 能 不 转 求 appendChild、insertBefore 来 处 
理 。 下 面 出 目 MSDN; 


http://msdn.microsoft.com/en- 
us/library/ms533897(VS.85).aspx The property is 
read/write for all objects except the following, for 
which it is read-only: COL, COLGROUP, 
FRAMESET, HEAD, HTML, STYLE, TABLE, 
TBODY, TFOOT, THEAD, TITLE, TR 


IE 的 innerHTML 会 包 略 掉 no-scope element . 
no-scope element 是 了 下 的 内 部 概念 ， 隐 荐 得 很 深 ， 仅 


在 MSDN 中 说 明 注释 节点 是 no-scope element, E 
social.msdn.microsoft.com 官 方 论坛 Wn 点 内 容 





Script 与 style 也 是 no-scope elements。 经 过 社区 
文公 多 年 的 发 据 ， 大 人 致 确认 注释 、style、script、 
link、meta、noscript 等 表示 功能 性 的 标签 为 no- 
scope element。 想 要 用 innerHTML 生 成 它们 ， 必 人 须 
竺 它们 之 前 加 上 一 些 东 西 ， 比 如 文字 或 其 他 标签 。 











window.onload = function() { // 请 在 IE6~IE8 下 测试 

var div = document.createElement("div"); 

div.innerHTML = '<meta http-equiv="X-UA-Compatible" content 
="TE=9"/>'! ; 

alert(div.childNodes.length); 





div.innerHTML = 'X<meta http-equiv="X-UA-Compatible" conten 
t="IE=9"/>'; 

alert(div.childNodes.length); 
}; 





另 一 个 众所周知 的 问题 是 innerHTML 不 会 执 
T script 标签 里 面 的 脚本 。 其 实 也 不 尽 然 ， 如 末 浏 
览 器 支持 script 标 签 的 defer 属 性 ， 它 束 能 执行 脚本 。 
这 个 特性 检测 比较 难 做 ， 因 此 像 jQuery 和 直接 用 正则 
把 它 里 面 的 内 容 抽 取出 来 ， 然 后 全 局 eval 了 。 





avalon 则 采取 另 一 种 策略 ， 反 正 innerHTMEL 赋 值 后 
己 经 将 它们 转换 成 节点 ， 那 么 再 将 它们 取出 来 
用 document .createElement ("script") 生成 的 节点 


REIT So 


ia A TA) UE A AN PE BE FEE div 
的 子 元 素 ， 比 如 td、 也 元 素 ， 需 要 最 外 面包 几 层 ， 
才能 放 到 innerHTML 中 解释 ， 人 否则 浏览 器 会 当 作 普 
通 的 文本 节点 生成 。 这 个 是 jQuery 团队 友 现 的 ， 现 
在 所 有 框 染 都 使 用 此 技术 生成 节点 。 如 宁 把 这 些 特 
殊 的 标签 比 作 是 “胚胎 "， 那 么 孵化 它们 出 来 的 那些 
RICA AR” o EÆEW3ICH F, EMA IE 
一 组 组 地 分 成 不 同 的 模块 ， 如 表 6-1 所 示 。 


























一 直 以 来 ， 人 们 都 古 使 用 完整 的 团 合 标签 来 包 


里 这 些 特 殊 标 签 ， 直 到 人 们 发 现 浏览 器 会 自动 补 全 
闭合 标签 。 








window.onload = function() { 

var div = document.createElement("div"); 

div.innerHTML = '<table><tbody><tr></tr></tbody></table>';/ 
/手动 闭合 标签 

alert(div.getElementsByTagName("tr").length);//1 























div.innerHTML = '<table><tbody><tr></tr>';// 让 浏览 器 自动 处 理 
alert(div.getElementsByTagName("tr").1length);//1 


He H at 








完结 束 标签 的 元 素 有 body、 


colgroup. dd. dt. head, html, li~ optgroup, 
option. p~ tbody. td. tfoot, th. thead, tro Wii 
a A Ll ae Ae A Se i Be, MTR SIP A 
者 转 问 目 己 的 阵营 。 对 于 浏览 右 而 言 ， 根 据 上 下 文 
伞 完 标签 不 是 什么 难事 ， 加 之 ， 这 能 有 效 减 少 页 面 
的 大 小 ， 在 网 速 奇 慢 的 年 代 是 一 个 优化 。 同 时 不 写 
结束 标 丛 能 避免 文本 布点 出 现在 元 素 前 后 ， 因 此 也 
能 减少 页 面 上 市 点 的 总 体 数量 。 

















但 现在 已 经 不 推荐 这 样 做 ， 浏 览 器 只 会 固守 规 
则 ， 少 与 结束 标签 ， 很 容易 引起 错误 镶 租 。xhtml 
布道 者 就 是 抓 住 这 一 点 死命 反击 HTML4。 但 在 
JavaScript 框 染 内 部 ， 由 于 是 把 标签 限制 在 一 个 div 
内 ， 由 经 验 丰富 的 JSer 来 处 理 ， 因 此 还 是 可 以 利用 
的 。 














InsertAdjacentHTML 是 dhtml 的 产物 ， 这 也 是 I 下 
的 私有 实现 。 比 起 其 他 API， 它 具有 灵活 的 插入 方 





式 。 你 可 以 插入 到 一 个 元 素 内 部 的 最 前 面 
CafterBegin) 、 内 部 的 最 后 面 CbeforeEnd) 、 这 
个 元 素 的 前 面 (beforeBegin) 、 后 面 

CafterEnd) 。 它 们 一 一 对 应 jQuery 的 prepend、 
append、before、after。 因 此 用 它 来 构造 这 几 个 方 
法 ， 代 码 量 会 大 大 减少 。 但 不 巧 的 是 ， 
insertAdjacentHTML 要 我 们 的 字符 串 同 样 遵 守 
HTML 的 套 杠 规则。 在 还 下 ， 它 在 td、 了 h 等 元 素 内 
部 插入 新 市 点 还 是 报错 ， 理 由 同 innerHTML。 不 
过 ， 厂 我 们 能 提早 判定 用 户 字 符 串 没 有 需要 人 套 航 的 
元 素 、 没 有 no-scope 元 素 的 话 ， 那 么 在 插入 操作 中 
它 还 是 很 有 用 的 。 




















jQuery 相关 的 操作 是 先 经 由 append 方 法 进入 
domManip 方 法 ， 再 到 buildFragment 方 法 ， 再 到 
clean 方 法 ， 这 么 复 洒 才 完 成 。 其 间 有 字符 串 再 加 
工 、script 内 容 抽 取 、innerHTML 序 列 化 、 文 档 碎片 
对 象 生 成 、 插 入 DOM、 全 局 eval 这 么 多 步骤 。 在 最 








里 想 的 情况 ， 我 们 可 以 用 一 个 insertAdjacentHTML 
搞定 。insertAdjacentHTML 的 羔 容 性 如 表 6-2 所 示 。 


表 6-2 





a e 
如 果 浏 览 器 不 支持 insertAdjacentHTML, HWA 


我 们 可 以 用 下 面 介 绍 到 的 createContextual Fragment 
来 模拟 。 





if (typeof HTMLElement !== "undefined" && 
!'HTMLELement.prototype.insertAdjacentElement) { 
HTMLElement.prototype.insertAdjacentElement = function(wher 
e, parsedNode) { 
Switch (where.toLowerCase()) { 
case 'beforebegin': 
this.parentNode.insertBefore(parsedNode, this) 
break; 
case 'afterbegin': 
this.insertBefore(parsedNode, this.firstChild); 
break; 
case 'beforeend': 
this.appendChild(parsedNode) ; 
break; 
case 'afterend': 
if (this.nextSibling) 
this.parentNode.insertBefore(parsedNode, this.n 
extSibling); 


else this.parentNode.appendChild(parsedNode) ; 
break; 


} 


HTMLElement.prototype.insertAdjacentHTML = function(where, 
htmlStr) { 
var r = this.ownerDocument.createRange(); 
r.setStartBefore(this); 
var parsedHTML = r.createContextualFragment(htmlStr); 
this.insertAdjacentElement(where, parsedHTML) 


HTMLElement.prototype.insertAdjacentText = function(where, 
txtStr) { 
var parsedText = document.createTextNode(txtStr ) 
this.insertAdjacentElement(where, parsedText) 





createContextualFragment 古 Firefox 推 出 的 私有 
实现 ， 它 是 Range 对 象 的 一 个 实例 方法 ， 相 对 于 





insertAdjacentHTML 直 接 将 内 容 插入 到 DOM 树 。 
createContextualFragment 则 是 允许 我 们 将 字符 串 转 
换 为 文档 肆 片 ， 然 后 再 由 你 决定 插入 到 哪里 。 在 著 
名 的 emberjs 中 ， 如 果 文 持 Range， 那 么 它 的 html、 
append、prepend、after 等 方法 都 用 
createContextualFragment 与 deleteContents 实 现 。 


createContextualFragment 与 insertAdjacentHTML 一 - 





Re, HITR ST HTML RA 


此 外 ， 我 们 还 可 以 用 document.write 来 创建 内 
窑 ， 但 我 们 动态 添加 节点 时 多 发 生 在 DOM 树 建 完 
之 后 ， 因 此 不 太 合 适 ， 这 里 束 不 展开 了 。 











最 后 要 隆重 介绍 的 template 标 签 ， 它 是 一 个 天 
然 的 html parser， 能 将 我 们 赋予 它 的 字符 串 直 接 fk 
HRY SOR WE! 





var a = document.createElement('template' ) 
a.innerHTML = '<div></div><div></div>' 
console.log(a.content ) 


var a = document.createElement('template' ) 
a.innerHTML = '<div></div><div></div>' 


Console.log(a.content ) 

v #document -fragment 
<div></div> 
<div></div> 





最 后 封 上 avalon 的 parseHTML 方法， 也 是 所 有 
主流 库 都 拥有 的 一 个 方法 ， 将 一 段 HTML 转 换 为 一 
ARE H o 


https://github.com/RubyLouvre/avalon/blob/2.0.2/src/dom/html/mo 
dern.js 
var Cache = require('../../seed/cache' ) 
var fixScript = require('./fixScript' ) 
var tagHooks = new function () { 
//3K RR EGE AY RAS HARE AR Ts SEE AE BY Bh oc eS HE a 
avalon.shadowCopy(this, { 
option: document.createElement('select'), 
thead: document.createElement('table'), 
td: document.createElement('tr'), 
area: document.createElement('map'), 
tr: document.createElement('tbody'), 
col: document.createElement('colgroup'), 
legend: document.createElement('fieldset'), 
_default: document.createElement('div'), 
'g': document.createElementNS( 'http://www.w3.org/2000/s 
vg', 'svg') 
}) 
this.optgroup = this.option 
this.tbody = this.tfoot = this.colgroup = this.caption = th 
is.thead 
this.th = this.td 











} 
// ERSVGE HR AE FA AS BEC 
var svgHooks = { 
g: tagHooks.g 
} 
String('circle, defs,ellipse,image,1ine,path,polygon, polyline,re 
ct,symbol, text,use'). 
replace(avalon.rword, function (tag) { 
svgHooks[tag] = tagHooks.g // 处 理 SVG 
}) 




















var rtagName = /<([\w:]+)/ 
var rxhtml = /<(?!area|br|col|embed|hr|img|input|link|meta|para 
m)(([\w: ]+) [A>] *)\/>/ig 


var rhtml = /<|&#?\wt;/ 

var htmlCache = new Cache(128) 

var templateHook = document.createElement('template' ) 

// 如 果 浏 览 器 不 支持 HTML5 template 元 素 

if (!/HTMLTemplateElement/.test(tempateTag)) { 
templateHook = null 
avalon.shadowCopy(tagHooks, svgHooks) 





avalon. parseHTML 


d 


function (html) { 
document.createDocumentFragment(), firstChil 


var fragment 


if (typeof html !== 'string') { 
return fragment 


} 

if (!rhtml.test(html)) { 
fragment .appendChild(document.createTextNode(htm1) ) 
return fragment 

} 

html = html.replace(rxhtml, '<$1></$2>').trim() 

var hasCache = htmlCache.get(html) 

if (hasCache) { 
return hasCache.cloneNode(true) 


var tag = (rtagName.exec(html) || ['', ''])[1].toLowerCase( 


var wrapper = svgHooks[tag], firstChild 

if (wrapper) {//svgHooks 
wrapper.innerHTML = html 

} else if (templateHook) {//templateHook 
templateHook.innerHTML = html 
wrapper = templateHook.content 

} else {//tagHooks 
wrapper = tagHooks[tag] || tagHooks. default 
wrapper.innerHTML = html 

} 

fixScript (wrapper) 

if (templateHook) { 
fragment = wrapper 

} else {// 将 wrapper 上 的 节点 转移 到 文档 碎片 上 ! 
while (firstChild = wrapper.firstChild) { 

fragment .appendChild(firstChild) 


} 


} 
if (html.length < 1024) { 
htmlCache.put(html, fragment.cloneNode(true) ) 


} 


return fragment 





Cache Tit KEIR, ABC 
ase 


function Cache(size) { 
var keys = [] 
var cache = {} 
this.get = function (key) { 
return cache[key+' '] 


} 

this.put = function (key, value) { 
// 加 上 ' ' 是 用 于 处 理 IE6-8 的 toString，value0f 方 法 
if (keys.push(key + ' ') > size) { 























delete cache[ keys.shift() ] 


return (cache[ key + ' ' ] = value) 


} 


return this 





fixScript 顾 名 思 义 ， 用 于 修复 innerHTML 生 成 
的 Script 节点 ， 不 会 用 出 请 求 与 执行 text 属 性 的 行 





var ScriptNode = document.createElement('script' ) 
var scriptTypes = avalon.oneObject(['', 'text/javascript', 'tex 
t/ecmascript', 

‘application/ecmascript', ‘application/javascript']) 


function fixScript(wrapper) { 
var els = wrapper.getElementsByTagName('script') 
if (els.length) { 
for (var i = 0, el; el = els[it+]; ) { 
if (scriptTypes[el.type]) { 


c tion (attr) { 


module.exports = 


// 以 偷 龙 转 凤 方式 恢复 执行 脚本 功能 


var neo = scriptNode.cloneNode(false) //FF 不 能 省 
Array.prototype.forEach.call(el.attributes, fun 
if (attr && attr.specified) { 


neo[attr.name] = attr.value // 复 制 其 属性 
neo.setAttribute(attr.name, attr.value) 








}) // jshint ignore:line 
neo.text = el.text 
el.parentNode.replaceChild(neo, el) // 蔡 换 节 点 


fixScript 





6.2 市 点 的 插入 





从 原生 API 单 纯 的 字面 来 看 ， 浏 览 器 最 切 提 供 
了 insertBefore 与 appendChild 这 两 个 方法 。 还 有 一 个 
古 通 过 符 换 已 有 节点 的 “ 择 入 方式 ”，replaceChild。 
然后 人 们 党 得 不 够 用 ， 于 是 一 般 的 工具 库 还 创建 了 
A e 











function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent .appendChild(newElement ); 


} else { 
parent.insertBefore(newElement, targetElement.nextSibl 


ing); 
} 





在 微软 的 DHTML 推 销 过 程 中 ， 又 造 出 了 
insertAdjacentXXX 三 组 方法 。 


e insertAdjacentHTML. 


e insertAdjacentText. 


e insertAdjacentElement. 


参数 都 相同 ， 第 1 个 是 插入 的 位 置 ， 第 2 个 是 皇 
入 的 内 容 (insertAdjacentHTML 与 
insertAdjacentText 要 求 传 入 字符 串 ， 
insertAdjacentElementZ2k {RA > EMENI 
个 插入 的 位 置 ， 提 供 了 4 种 方式 〈 见 网 6-1) 。 








< 所 一 beforebegim 
<div> 


«a afterbegin 


div content 

am beioreend 
</div> 

< afterend 





图 6-1 


(1) beforebegin: 插入 到 标签 开始 前 。 


(2) afterbegin: 插入 到 标签 开始 标记 之 后 。 
(3) beforeend: 插入 到 标签 结束 标记 前 。 


(4) afterend: 插入 到 标签 结束 标记 后 。 


这 为 以 后 jQuery 的 before、prepend、append、 
after 方 法 的 设计 提供 了 一 个 样板 。 到 后 来 ， 由 于 这 
几 个 方法 太 受 欢迎 ，W3C 在 DOM4 中 决定 原生 支持 
它们 由， 参数 可 以 是 字符 串 与 DOM 节 点 ， 如 图 6-2 
所 示 。 





图 6-2 


除 此 之 外 ，jQuery 还 提供 了 wrap、wrapAll、 
wrappInner 这 3 种 特殊 的 插入 操作 。 





wrap 为 当前 元 系 提 供 了 一 个 父 节 点 ， 此 父 节 点 
将 动态 插入 原市 点 的 父亲 底下 。 这 个 我 们 可 以 轻松 
在 了 正 下 用 neo.applyElement (old, "outside") 实 现 。 


wrapAll 则 是 为 一 堆 元 系 提 供 一 个 共同 的 父 节 
扩 ， 插 入 到 第 一 个 元 素 的 父亲 压 下 ， 其 他 元 素 骨 统 
统 挪 到 新 节操 确 下 。 





wrappInner 古 为 当前 元 系 插 入 一 个 新 市 点 ， 然 
后 将 它 之 前 的 孩子 挪 到 新 市 点 情 下。 这 个 我 们 可 以 
轻松 在 了 正 下 用 neo.applyElement (old, "inside") 实 现 。 
从 上 面 的 描述 来 看 ，applyElement 真 是 很 强大 的 ， 
可 以 在 标准 浏览 强 扩 展 一 下 ， 让 它 应 用 更 广 ! 








if (!document.documentElement.applyElement && typeof HTMLElemen 
t !== "undefined") { 


// 实 现 IE only 的 removeNode 
HTMLElement.prototype.removeNode = function(deep) { 

//deep 参 数 决定 是 否 只 剩 除 此 节点 ， 还 是 将 其 下 级 的 所 有 子孙 都 一 起 删 掉 
// 如 果 只 删 目标 节点 (deep=false 或 不 传 参 ) 
// 那 么 将 其 子孙 全 部 上 挪 到 目标 节点 的 位 置 上 
var parent = this.parentNode 
var childNodes = this.childNodes 
var fragment = this.ownerDocument.createElementFragment 

















b 











while(childNodes. length) { 
fragment .appendChild(childNodes[ 0] ) 


} 

if(!!deep){ 
parent. removeChild(this) 

selse{ 
parent.replaceChild(this, fragment ) 


return this 


} 

// 可 以 模拟 wrap、wrapInner 的 效果 

HTMLElement.prototype.applyElement = function(newNode, wher 
e) { 


newNode = newNode.removeNode( false) 


var range = this.ownerDocument.createRange( ) 

var where = ((where || 'outside').toLowerCase() 

var method = where === 'inside' ? 'selectNodeContents' 
where === 'outside' ? 'selectNode' : '‘error' 

if(method === 'error'){ 


throw new Error('DOMException.NOT_SUPPORTED_ERR(Q) ' 
) ; 
selse{ 
range[method](this) 
range.surroundContents(newNode ) 
range.detach() 


} 


return newNode 





6.3 ”市 点 的 复制 





IE 对 元 素 的 复制 与 innerHTML 一 样 ， 存 在 许多 
bug， 非 常 著 名 的 就 是 上 节 所 说 的 ， 下 自作 多 情 地 
复制 attachEvent 事 件 。 另 外 ， 根 据 标准 浏览 器 
cloneNode 的 测试 ， 它 只 会 复制 元 系 写 在 标签 内 的 
RE 而 了 6 一 下 8 还 
文 持 通过 node,aaa = "xxx" 设置 的 属性 复制 。 














<div id="aaa" data-test="test" title="tit1le"> 目 标 节 点 </div> 


window.onload = function() { 
var node = document .getElementById("aaa"); 
node.expando = { 
key: 1 


} 
node.setAttribute("attr", "attr") 
var clone = node.cloneNode(false); 


alert(clone.id);//aaa 
alert(clone.getAttribute("data-test"));//test 
alert(clone.getAttribute("title"));//title 
alert(clone.getAttribute("attr"));//attr 
node.expando.key = 2 // 修 正 为 2 

alert(clone.expando.key )//IE6~IE8: 2; 其 他 : undefined 





如 果 仅 是 这 样 还 好 办 ， 但 正在 复制 时 不 但 会 多 
复制 一 些 ， 有 时 还 会 少 复制 一 些 ， 这 让 程序 员 不 好 
处 理 。 我 们 看 一 下 jQuery 是 怎么 处 理 的 。 
jQuery.fn.clone 拥 有 两 个 参数 ， 第 一 个 是 只 复制 节 
点 ， 但 不 复制 数据 与 事件 ， 默 认为 false; 第 二 个 决 
定 如 何 复 制 它 的 子孙 ， 默 认 是 遵循 参数 一 的 决定 。 





jQuery.fn.clone = function( dataAndEvents, deepDataAndEvents ) 








// 方 法 只 是 用 来 调整 这 两 个 参数 ， 然 后 交 给 真正 干事 的 jQuery .clone 
dataAndEvents = dataAndEvents == null ? false : dataAndEven 





deepDataAndEvents = deepDataAndEvents == null ? dataAndEven 
: deepDataAndEvents; 
return this.map( function() { 

return jQuery.clone(this,dataAndEvents, deepDataAndEvents 





jQuery.clone 异 和 复杂 。 





jQuery ,clone = function( elem, dataAndEvents, deepDataAndEvents 


ian 


var destElements, node, clone, i, srcElements, 
inPage = jQuery.contains( elem.ownerDocument, elem ) 


// FED WAS IWC MIE FE SHEE RY, MÆEæchromeikiž, ATLA ER 
// 使 用 cloneNode(true ) 搞 定 
if ( support.html5Clone || jQuery.isXMLDoc( elem ) || 











!rnoshimcache.test( "<" + elem.nodeName + ">" ) ) { 


clone = elem.cloneNode( true ); 

} else { 
//IE8 不 支持 复制 未 知 的 标签 类 型 ， 需 要 使 用 outerHTML hack 
fragmentDiv.innerHTML = elem.outerHTML; 
fragmentDiv.removeChild( clone = fragmentDiv.firstCh 












































ild ); 
if ( ( !support.noCloneEvent || !Ssupport.noCloneChecked 
) && 
( elem.nodeType === 1 || elem.nodeType === 11 ) 
&& !jQuery.isXMLDoc( elem ) ) { 
//IE6~IE8 下 是 使 用 attachEvent 添 加 事件 的 ， 这 时 可 能 将 事件 也 复 
制 了 
// 此 外 如 果 元 素 是 input [type=radio]， 其 checked 属 性 可 能 无 法 复 
制 | 
// 这 里 有 一 大 算 偿 bug 要 修复 
destElements = getAll( clone ); 
srcElements = getAll( elem ); 
// 这 里 几乎 都 是 TIE6~IE8 的 bug 
for ( i = 0; ( node = srcElements[ i ] ) != null; ++ 
i ){ 


// Ensure that the destination node is not null 
; Fixes #9587 
if ( destElements[ i ] ) { 
fixCloneNodeIssues( node, destElements[ i | 


); 


} 


// 这 是 针对 jQuery 的 行为 ， 复 制 之 前 的 数据 与 事件 
if ( dataAndEvents ) { 
if ( deepDataAndEvents ) { 
srcElements = srcElements || getAll( elem ); 
destElements = destElements || getAll( clone ); 











for ( 1 = 0; ( node = srcElements[ i ] ) != nul 
l; i++ ) { 
cloneCopyEvent( node, destElements[ i ] ); 


} else { 
CcloneCopyEvent( elem, clone ); 


J 
} 


// 复制 生成 的 Script 节点 与 innerHTML 一 样 ， 不 会 执行 脚本 或 发 出 请 求 
// 如 果 手 动 修复 
destElements = getAll( clone, "Script" ); 
if ( destElements.length > © ) { 
setGlobalEval( destElements, !inPage && getAll( ele 





m, "script" ) ); 


J 








destElements = srcElements = node = null; 


return clone; 








setAl iF FRUER RPA TINT A 
的 ， 类 似 getElementsByTagName， 不 过 它 会 根据 浏 
览 器 是 否 支 持 querySelectorAll 来 判定 是 否 进行 优 
化 。 





function fixCloneNodeIssues( src, dest ) { 
var nodeName, e, data; 























// WEFTIE PAL 


EIU 4 节点 








if ( dest.nodeType !== 1 ) { 


return; 


} 


nodeName = dest.nodeName.toLowerCase(); 








// 以 前 原来 节点 的 事件 
if ( !support.noCloneEvent && dest[ jQuery .expando ] ) { 


data = jQuery._data( dest ); 


for ( e in data.events ) { 
jQuery.removeEvent( dest, e, data.handle ); 


// 移 除 UUID 
dest.removeAttribute( jQuery.expando ); 


} 


// 手动 添加 script 的 text 属 性 ，IE 下 通过 cloneNode 无 法 复制 

if ( nodeName === "Script" && dest.text !== src.text ) { 
disableScript( dest ).text = src.text; 
restoreScript( dest ); 











// IE6 一 IE10 improperly clones children of object elements u 
Sing classid. 
// IE6 一 IE10 无 法 复制 object 元 素 的 孩子 ,新 节点 的 下 面 没有 孩子 ! ! 
} else if ( nodeName === "object" ) { 
if ( dest.parentNode ) { 
dest.outerHTML = src.outerHTML; 














} 
if ( support.html5Clone && ( src.innerHTML && !jQuery.t 


rim( dest.innerHTML ) ) ) { 
dest.innerHTML = src.innerHTML; 


} 


} else if ( nodeName === "input" && rcheckableType.test( sr 
c.type ) ) { 





// TE6~IE8 无 法 复制 checkbox/radio 的 checked, defaultCheck 





ed 属性 





dest.defaultChecked = dest.checked = src.checked; 








// TE6~IE7 checkbox/radio 标 签 如 果 没 有 显示 指定 value 时 ， 其 默认 
值 会 变 成 on 
if ( dest.value !== src.value ) { 
dest.value = src.value; 

















} 
// TE6~IES 无 法 复制 option 元 素 的 selected defaultSelected 属 性 
} else if ( nodeName === "option" ) { 


dest.defaultSelected = dest.selected = src.defaultSelec 
ted; 





// IE6~IE8 无 法 复制 文本 域 、 文 本 区 的 defaultValue 属 性 
} else if ( nodeName === "input" || nodeName === "textarea" 


yee 








dest.defaultValue = src.defaultValue; 








上 面 处 理 object 标 签 ， 其 实 还 是 有 问题 的 。 大 
家 要 上 自己 实现 库 时 ， 建 议 改 成 如 下 。 


if(nodeName === 'object'){ 
var params = src.childNodes 
if(dest.childNodes.length !== params.length) { 
for(var i = 0, el; el = params[it++];){ 
dest .appendChild(el.cloneNode(true) ) 





至 于 cloneCopyEvent， 这 方法 与 jQuery 的 数据 
绥 存 系统 绑 得 太 死 了 了 ， 和 暂时 先 跳 过 


不 过 随 痢 浏览 器 的 升级 ， 原 生 的 cloneNode 方 
法 的 pug 会 修复 得 很 快 ， 因 此 大 家 不 用 文 持 IE6 一 
IE8 这 样 十 老 的 浏览 器 ， 可 以 像 zepto 那 样 用 很 有 了 晚 
力 的 几 行 搞定 : 





//zepto 
Clone: function() { 
return this.map(function() { 
return this.cloneNode(true) 


}) 





6.4 ”节点 的 移 除 





浏览 器 提供 了 多 种 移 除 贡 点 的 方法 ， 币 见 的 有 
removeChild、removeNode， 动 态 创 建 一 个 元 素 节 
点 或 文档 碎片 再 appendChild， 创 建 Range 对 象 选 中 
目标 节点 然后 deleteContents。 








// 一 个 不 需要 知道 父 节 点 ， 移 除 节 点 的 方法 

var f = document.createDocumentFragment() 

function clearChild (node) { 
f.appendChild(node) 
f.removeChild(node) 


return node 


} 





removeNode 是 正 的 私有 实现 ，Opera 也 实现 了 
此 方法 。 它 的 作用 是 将 目标 节点 从 文档 树 中 删除 ， 
返回 目标 节点 。 它 有 一 个 参数 ， 为 布尔 值 ， 其 默认 
值 为 false， 即 仅 删 除 目 标 节 点 ， 保 留 子 节点 ， 为 
true 时 相当 于 removeChild。 

















deleteContents E Æ LK eC (in JAYAPI, FEAR HE 


Ze, SW. 


removeChildf£EIE6~IE7'? @ AHEJ fal a, 
IE 的 GC 回 收 比较 失败 而 引起 。 由 于 这 太 底 层 了 ， 
这 里 就 不 展开 了 。 这 里 给 出 EXT 框 架 的 方案 。 像 
EXT 这 样 庞大 的 UI 库 ， 所 有 节点 都 动态 生成 ， 因 此 
是 非常 注重 GC 回 收 的 。 











var removeNode = IE6 || IE7 ? function() { 
var d; //IE6、IE7 的 判定 自己 写 
return function(node) { 
if (node && node.tagName != 'BODY') { 
d = d || document.createElement('DIV'); 
d.appendChild(node); 
d.innerHTML = ''; 
} 





} 
}() : function(node) { 
if (node && node.parentNode && node.tagName != 'BODY') { 


node. parentNode. removeChild(node) ; 
} 
} 








为 什么 这 么 写 呢 ? 因为 在 下 6 一 正 8 中 存在 一 个 
P 7H] (DOM hyperspace) 的 概念 。 即 当 
元 素 移出 DOM 树 ， 又 有 JavaScript 关 联 时 元 素 不 会 


消失 ， 它 被 保 存在 这 个 叫 超 空 间 的 地 方 。 (PPK IR 
JavaScript》 一 书 指出 ， 可 以 用 是 否 存 在 parentNode 
来 判定 元 素 是 否 在 超 空间 。 








window.onload = function() { 
var div = document.createElement("div"); 
alert(div.parentNode); //null 
document .body.removeChild( document .body.appendChild(div)); 
alert(div.parentNode); //IE6~IE8 object; Hf} null 
if (div.parentNode) { 


alert(div.parentNode.nodeType); //11 文档 碎片 








第 一 个 alert 出 null， 这 个 所 有 浏览 器 都 一 样 ， 
因此 有 时 我 们 误 以 为 可 以 当 作 节点 是 否 在 DOM 的 
基准 。 但 当 元 素 插 入 DOM 树 再 移出 时 ， 就 有 差异 
了 ， 了 IE6 一 下 8 会 下 弹出 一 个 文档 碎片 对 象 。 因 此 可 
以 想象 为 何 正 性 能 这 么 兰 了 ， 它 目 以 为 这 样 能 重复 
ATR, (UR ABR AS, ALATA 

ARRIVE SVP REIN EA, OZ h Ta 
rl, LIRA Die BU o 




















我 们 再 看 innerHTMIL 清除 元 素 会 怎么 样 。 


<body><div id="test"></div></body> 


window.onload = function() { 
var div = document.getElementById('test'); 
document.body.innerHTML = ''; 
alert(div.parentNode) ;//null 





结果 在 下 下 也 是 null， 但 这 也 不 能 说 明 
innerHTMEL 惑 比 removeChild 好 。 我 们 继续 下 一 个 实 


W o 


<body> 
<div><div id="test1">test1</div></div> 
<div><div id="test2">test2</div></div> 
</body> 


window.onload = function() { 
var divi = document.getElementById('test1i'); 


divi.parentNode. removeChild(div1); 

alert(divi.id + ":" + divi.innerHTML);//test1i:test1 
var div2 = document.getElementById('test2'); 
div2.parentNode.innerHTML = ""; 

alert(div2.id + ":" + div2.innerHTML);//test2 





这 时 我 们 束 发 现 ， 当 用 removeChild 移 除 节 点 ， 





原来 元 际 的 结构 没有 发 生变 化 ， 但 用 innerHTML 
时 ，IE6 一 下 8 下 会 二 接 清空 其 里 面 的 内 容 ， 只 剩 下 
个 空 学 ， 而 标准 浏览 右 则 与 removeChild 保 持 一 致 。 
tJ“ Lb, ZEIE F, removeChildit HiT ity, 1E 
树枝 可 以 再 次 使 用 。 而 innerHTML 就 是 把 所 需要 的 
枝叶 给 拔 下 来 然后 把 树枝 烧 挤 。 鉴 于 IE 对 内 存 管 
理 的 失败 ， 这 么 干净 的 清除 节点 正 是 我 们 寻找 的 方 
法 ! 因此 EXT 从 1.0 到 4.0， 此 方法 也 没 大 改变 。 





对 于 jQuery 这 样 的 类 库 框 染 来 说， 估计 很 难 走 
这 条 路 。 写 已 经 被 上 自己 的 数据 缓存 系统 绑架 了 了 ， 移 
除 节点 时 需要 逐个 检测 元 系 ， 从 绥 存 系统 中 移 除 对 
应 的 缓存 体 ， 否 则 会 让 浏览 器 宕 机 。 不 过 最 不 好 的 
是 jQuery 通过 类 数组 结构 与 preObject 困 住 节 点 的 方 
式 ， 这 束 造 成 了 jQuery 即便 是 使 用 innerHTML ， 元 
素 市 点 在 下 下 还 是 位 于 DOM 超 空间 中 。 














jQuery 在 性 能 上 没有 优势 ， 于 是 在 移 除 市 扣 的 





方式 上 造势 。 它 提供 了 3 PERT ARIA: 
remove， 移 除 季 点 的 同时 从 数据 绥 存 系统 上 移 除 对 
应 数据 ，empty， 只 清空 元 系 的 内 部 ， 相 当 于 IE 下 
的 removeNode(false); 及 detach 方 法 。 经 常 有 这 人 么 
一 个 场景 ， 我 们 要 为 元 素 做 一 些 复 哥 的 属性 或 样子 
操作 ， 出 于 性 能 考虑 ， 我 们 会 完 将 元 素 移出 DOM 
树 ， 待 处 理 完 再 插 回 来 。 但 绝对 大 多 数 操 作 DOM 
的 方法 都 与 数据 绥 存 方法 关联 在 一 起 ， 帮 用 remove 
方法 ， 会 将 这 些 数据 与 事件 都 清理 把 的 。 

此 ，detach 方法 应 运 而 生 ， 它 只 是 用 于 临时 移出 
DOM 树 ， 不 会 移 除 数据 与 事件 。 


下 面 是 它们 的 实现 。 








"remove, empty, detach".replace(/[^, ]+/g, function(method) { 
$.fn[method] = function() { 





var isRemove = method !== "empty"; 
for (var i = 0, node; node = this[i++];) { 
if (node.nodeType === 1) { 
// 移 除 匹 配 元 素 


var array = $.slice(node[TAGS]("*")).concat(isR 
emove ? node : []); 
if (method !== "detach") { 


array.forEach(cleanNode) ; 


} 


if (isRemove) { 
if (node.parentNode) { 
node. parentNode. removeChild(node) ; 


} 
} else { 
while (node.firstChild) { 
node. removeChild(node.firstChild); 
} 
} 


return this; 





如 果 我 们 的 框架 没有 像 jQuery 那 样 引 入 一 个 庞 
大 的 数据 缓存 系统 ， 而 是 像 zepto.js 那 样 通 过 
HTML5 的 data-* 来 缓存 数据 ， 那 么 许多 东西 都 可 以 
简化 了 。 这 也 意味 看 我 们 不 打算 若 容 IE6、IE7、 
IE8， 那 么 我 们 残 可 以 使 用 deleteContents 或 





textContent。 比 如 我 们 实现 一 个 清空 元 系 内 部 的 
API. 


版 本 一 ， 最 传统 的 方式 。 











function clearChild (node) {//node 可 以 是 元 素 节点 与 文档 碎片 
while (node.firstChild) { 


node. removeChild(node.firstChild) 


} 


return node 





ees 使 用 deleteContents， 创 建 一 个 Range 
对 象 ， 然 后 通过 setStartBefore、setEndAfter 选 择 边 
F, ph 空 它们 俩 的 节点 。 


var deleteRange = document.createRange( ) 

function clearChild (node) {//node 可 以 是 元 素 节点 与 文档 碎片 
deleteRange.setStartBefore(node.firstChild) 
deleteRange.setEndAfter(node.lastChild) 
deleteRange.deleteContents() 
return node 











版 本 三 ， 使 用 textContent。textContent 是 W3C 
版 本 的 innerText。 这 个 东西 在 较 新 的 浏览 器 中 兼容 
性 特别 好 ， 并 且 同 时 存在 于 元 素 节 点 与 文档 人 雄 片 
中 。 























function clearChild (node) {V/V/node 可 以 是 元 素 节点 与 文档 碎片 
node.textContent = " 
return node 


6.5 ”节点 的 移 除 回调 实现 














当 我 们 为 元 素 节 点 绑 定 了 许多 数据 与 事件 时 ， 
为 了 防止 内 存 泄漏 ， 有 时 我 们 需要 一 个 回调 ， 当 节 
点 被 移 除 时 执行 一 些 清理 操作 。 


这 是 一 个 很 高 级 的 抽象 ， 早 期 浏览 器 是 没有 对 
应 API 的 。 到 IE9 时 ， 出 现 了 很 短命 的 Mutation 
Event， 其 中 与 移 除 相关 的 事件 有 两 个 。 





。DOMNodeRemoved， 如 果 节 点 被 其 包含 的 父 节 
点 移 除 ， 束 会 触发 此 事件 。 
。DOMNodeRemovedFromDocument， 如 果 节 点 被 
包含 的 父 节 点 或 其 祖先 六 点 移 除 ， 束 会 触 友 
此 事件 . 





从 功效 来 看 ， 显 
YXDOMNodeRemovedFromDocument 更 加 好 用 


些 ， 因 为 我 们 不 知道 哪 一 级 父 节 点 会 发 生 
removeChild 或 innerHTML 操 作 ， 导 致 下 方 所 有 子孙 
都 咎 清空 。 


if(window,chrome){// 现 在 只 有 chrome 坚 持 文 持 此 事件 
var root = document .documentElement 
root.addEventListener ('DOMNodeRemovedFromDocument', functio 
n(e){ 
setTimeout(function(){// 判 定 这 是 永久 移 除 还 是 临时 的 节点 挪动 
if(root.contains(e.target)){// 如 果 还 在 DOM 树 ， 说 明 是 永久 移 























action() // 这 里 执行 你 的 清理 操作 











{A bi Mutation Event 的 县 花 一 现 ， 我 们 需要 寻 
找 新 的 蔡 代 品 。 浏 览 器 将 监听 节点 变动 的 工作 交 给 


Mutation Observer. 





6.5.1 Mutation Observer 


Mutation Observer 〈 变 动 观察 器 ) 是 监视 DOM 
变动 的 接口 。DOM 人 发 生 任何 变动 ，Mnutation 


Observer 都 会 得 到 通知 。 


概念 上 ， 它 很 接近 事件 ， 可 以 理解 为 ， 当 
DOM 发 生变 动 ， 会 触发 Mutation Observer 事件 。 但 
是 ， 它 与 事件 有 一 个 本 质 不 同 : 事件 是 同步 触发 ， 
也 束 是 说 ， 当 DOM 发 生变 动 ， 立 刻 会 触发 相应 的 
事件 ; Mutation Observer 则 是 异步 触发 ，DOM 人 发 生 
变动 以 后 ， 并 不 会 马上 触及， 而 是 要 每 到 当前 所 有 
DOM 操 作 都 结束 后 才 触 发 。 











这 样 设计 是 为 了 应 付 DOM 变 动 频繁 的 特点 。 
举例 来 说 ， 如 果 在 文档 中 连续 插入 1000 个 段落 Cp 
元 素 ) ， 就 会 连续 触发 1000 个 插入 事件 ， 执 行 每 个 
事件 的 回调 函数 ， 这 很 可 能 造成 浏览 兹 的 卡 顿 ， 而 
Mutation Observer 完 全 不 同 ， 只 在 1000 个 段落 都 插 
入 结束 后 才 会 触及 ， 而 且 只 触发 一 次 。 











Mutation Observer 有 以 下 特点 。 


D 它 等 每 所 有 脚本 任务 完成 后 ， 才 会 运 
行 ， 即 采用 卉 步 方式 。 


(2) 它 把 DOM 变 动 记 录 封 装 成 一 个 数组 进行 
处 理 ， 而 不 是 一 条 条 地 个 别处 理 DOM 变 动 。 


(3) 它 既 可 以 观察 发 生 在 DOM 的 所 有 类 型 变 
动 ， 也 可 以 观察 某 一 类 变动 。 


目前 ，Firefox (14+) 、Chrome(26+)、 
Opera (15+) . IE (11+) Safari (6.1+) 支持 这 
个 API。Safari 6.0 和 Chrome 18~ Chrome 25 使 用 这 
个 API 的 时 候 ， 需 要 加 上 WebKit 六 绥 
(WebKitMutationObserver) 。 可 以 使 用 下 面 的 表 
达 式 ， 检 查 当 前 浏览 器 是 否 文 持 这 个 API。 


var MutationObserver = window.MutationObserver 
|| window.WebKitMutationObserver 
|| window.MozMutationObserver 


var observeMutationSupport = !!MutationObserver 





MutationObserver 是 一 个 构造 函数 ， 需 要 传 入 
一 个 回调 作 参 数 ， 返 回 一 个 observer 对 象 ， 然 后 
Observer 需要 指定 另外 两 个 参数 《第 一 个 是 监听 的 
起 点 ;第 二 个 是 配置 对 象 ， 指 明 要 监听 哪些 类 型 的 
变动 ) 








var observer new MutationObserver (callback); 
var options { 

'childList': true, 

‘attributes':true 


了 
observer .observe(document.documentElement, options); 





options 配 置 对 象 拥有 如 下 属性 。 





childList: 布尔 ， 子 市 反 的 变动 。 

attributes: 布尔 ， 属 性 的 变动 。 

characterData: 布尔 ， 节 点 内 容 或 节点 文本 的 变 
动 。 

e subtree: 布尔 ， 所 有 后 代 节 点 的 变动 。 
。attributeOldValue: 布尔 ， 表 示 观 察 attributes 变 

















动 时 ， 是 否 需要 记录 变动 前 的 属性 值 。 

e characterDataOldValue: 布尔 ， 表 示 观 察 
characterData 变 动 时 ， 是 否 需 要 记录 变动 前 的 
值 。 

e attributeFilter: 数组 ， 表 示 需 要 观察 的 特定 属性 

(Eb an[‘class’,’sre’]) 。 








此 外 还 有 其 他 API 或 方法 ， 具 体 可 看 MDN 。 目 
前 的 知识 已 经 够 我 们 实现 一 个 新 的 remove 监 控 方 法 
J! 





https://developer .mozilla.org/zh-CN/docs/web/API/MutationObserv 
er 
//inspired by http://stackover flow. com/questions/31798816/simp1 
e-mutationobserver-version- of -domnoderemovedfromdocument 
function onRemove(element, onDetachCallback) { 
var observer = new MutationObserver(function () { 
function isDetached(el) { 


if (el.parentNode === document) { 
return false 

} else if (el.parentNode === null) { 
return true 

} else { 


return isDetached(el.parentNode) 


} 


} 
if (isDetached(element)) { 
onDetachCallback() 
} 
}) 


observer.observe(document, { 
childList: true, 
subtree: true 
}) 
} 





6.5.2 ”更 多 候选 方案 


但 无 论 是 Mutation Event 还 是 
MutationObserver， 对 浏览 器 的 版 本 要 求 还 是 非常 
高 的 ， 因 此 我 们 需要 更 多 候选 方案 。 在 avalon 中 ， 
为 了 实现 对 组 件 的 生命 周期 监控 ， 在 移 除 市 点 这 方 
田 一共 提供 了 4 个 方法 。 








方案 一 ， 如 果 浏 览 器 是 目 定 义 标 签 ， 这 里 特 指 
通过 document.register 方 法 注册 的 unresolved 元 素 ， 
售 则 它们 丈 是 来 知 元 素 ， 没 有 生命 周期 钩子 ， 如 表 
6-3 所 示 。 








表 6-3 








类 型 继承 自 示例 





unresolved 元 素 | HTMLElement <x-tabs>、<my-element>、<my-awesome-app> 





HAT, Chrome (27+) 和 Firefox (23+) 都 提 
供 了 对 document .register() 的 支持 ， 不 过 之 后 规 
范 又 有 一 些 演化 。chrome 31 将 是 第 一 个 支持 新 规范 
的 版 本 。 


创建 一 个 目 定 义 标 签 如 下 。 


var XFoo = document.register('x-foo', { 
prototype: Object.create(HTMLElement.prototype, { 
createdCallback:funciton(){ alert(" 节 点 创建 时 的 回调 ") 3, 





: function() { return 5; } 


value: function() { 


alert('foo() called'); 
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子 ， 如 表 6-4 所 示 。 
表 6-4 


回调 名 称 调用 时 间 点 





createdCallback 创建 元 素 实 例 





attachedCallback 入 实例 








detachedCallback 从 文档 中 移 除 实例 


attributeChangedCallback 添加 ， 移 除 ， 或 修改 一 个 属性 








基于 此 ， 我 们 得 到 第 一 个 实现 方案 。 





//https://github.com/RubyLouvre/avalon/blob/master/src/componen 
t/disposeDetectStrategy.js 
// 用 于 chrome, safari 
var tags = {} 
function byCustomElement(name) { 
if (tags[name] ) 
return 


var prototype = Object.create(HTMLElement.prototype) 
tags[name] = prototype 
prototype.detachedCallback = function () { 
var dom = this 
setTimeout(function () { 
fireDisposeHook (dom) 


}) 
} 


document.registerElement(name, prototype) 


ee 


方案 二 ， 使 用 Mutation Event. 


function byMutationEvent(dom) { 
dom.addEventListener ("DOMNodeRemovedFromDocument", function 


em. 


setTimeout(function () { 
fireDisposeHook (dom) 


}) 
}) 





方案 三 ， 如 果 是 IE9 或 以 上 ，window 上 暴露 了 
Node 构 造 器 ， 它 是 HTMLElement 更 上 位 的 原型 对 
象 ， 通 过 改写 一 些 常 用 的 DOM 操 作 方 法 ， 我 们 就 

能 得 到 移 除 的 时 机 了 。 





function byRewritePrototype() { 
if (byRewritePrototype.execute) { 
return 


} 


byRewritePrototype.execute = true 
var p = Node.prototype 
function rewite(name, fn) { 
var cb = p[name] 
p[name] = function (a, b) { 
return fn.call(this, cb, a, b) 
} 


rewite('removeChild', function (fn, a, b) { 
fn.call(this, a, b) 
if (a.nodeType === 1) { 
setTimeout(function () { 
fireDisposeHook(a) 
}) 
} 


return a 


}) 


rewite('replaceChild', function (fn, a, b) { 
fn.call(this, a, b) 
if (b.nodeType === 1) { 
setTimeout(function () { 
fireDisposeHook(a) 
}) 
} 


return a 


rewite('innerHTML', function (fn, html) { 
var all = this.getElementsByTagName('*' ) 
fn.call(this, html) 
fireDisposedComponents(all) 


}) 


rewite('appendChild', function (fn, a) { 
fn.call(this, a) 
if (a.nodeType === 1 && this.nodeType === 11) { 
setTimeout(function () { 
fireDisposeHook(a) 
}) 
} 


return a 


t) 


rewite('insertBefore', function (fn, a) { 
fn.call(this, a) 


if (a.nodeType === 1 && this.nodeType === 11) { 
setTimeout(function () { 
fireDisposeHook(a) 
}) 
} 


return a 


t) 
} 


function fireDisposedComponents (nodes) { 
for (var i = 0, el; el = nodes[i++]; ) { 
fireDisposeHook(el) 


} 








方案 四 ， 最 简单 粗暴 低 效 的 轮 询 ， 用 于 应 付 
IE6~IE8. 


var checkDisposeNodes 
var checkID = 0 
function byPolling(dom) { 
avalon.Array.ensure(checkDisposeNodes, dom) 
if (!checkID) { 
checkID = setInterval(function () { 
for (var i = 0, el; el = checkDisposeNodes[i++]; ) 


if (false === fireDisposeHook(el)) { 
avalon.Array.removeAt(checkDisposeNodes, i) 


zi 


} 


} 

if (checkDisposeNodes.length == 0) { 
clearInterval(checkID) 
checkID = 0 


+, 1000) 





至 于 为 什么 不 用 MutationObserver， 因 为 在 IE 


下 ， 如 果 使 用 此 方法 ， 那 么 它 原本 是 单个 文本 节点 
的 地 方 “ 暂 时 发 现在 {f 会 断 成 N 个 文本 市 点 ， 称 
LARK. Heit, WHI Soom TR PARAS 
个 文本 节点 ， 结 果 多 出 11 个 ， 由 于 文本 节点 的 内 容 
被 拆 得 文 离 破碎 ， 就 很 可 能 会 导致 一 些 基 于 DOM 
IMV VME H R. 








https://github.com/RubyLouvre/avalon/issues/636 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
<title>TEST</title> 


<script> 


var MutationObserver = window.MutationObserver 
if (MutationObserver) { 
var observer = new MutationObserver(function(mu 
tations) { 
LS ria 
}); 


observer .observe(document .documentElement, { 
childList: true, 
subtree: true 


}) 
} 


window.onload = function() { 
setTimeout(function() { 
var el = document.getElementById("aaa" ) 
console.log(el.childNodes.length) 
}, 3000) 


} 
</script> 


</head> 
<body> 
<div id="aaa"> 我 的 {{name}} 串 {{answer}}, 他 的 {{name}}nd{{no 
}}, {{10*10}} 
<p>IE 下 ， 如 果 使 用 了 MutationObserver， 那 么 它 原本 是 单个 文本 
节点 的 地 方 ( 和 暂时 发 现在 {{) 会 断 成 <em>N</em> 个 文本 节点 (我 称 之 为 碎片 化 )， 导 














致 一 些 基于 DOM 的 MVVM 框 架 扫 描 失 败 </p> 
</div> 
</body> 
</html> 

















6.6 innerHTML., innerText, 
outerHTMIL、outerText 欠 兼容 处 理 


下 率先 实现 了 innerHTML 、innerText、 
outerHTML、 outerText 这 4 个 便捷 的 API 来 替换 元 素 
节点 的 内 容 或 本 里， 如 图 6-3 所 示 。 


| 
m innerTEXT— | 
| | | 

| 


.><div id="testdiv"><p>Text in DIV</p></div><... 


| | 
L — — innerHTML- — — 4 





图 6-3 


outerText 的 作用 区 域 与 outerText 是 一 样 的 。 


功能 如 下 。 


innerHTML， 设 置 或 获取 位 于 元 系 开 标签 与 财 
标签 之 间 的 HTML。 

outerHTML， 设 置 或 获取 元 系 及 其 内 容 的 
HTML. 

innerText, w E RIR RM CRIT te E A is 
SrA SCAB 

。outerText， 设 置 或 获取 元 系 及 其 内 容 的 文本 。 





其 中 由 于 innerHTML 能 批量 生成 和 节点， 很 快 吏 
普及 到 其 他 浏览 器 。 目 前 这 些 方 法 都 被 W3C 标 准 
化 ， 只 有 Firefox 的 实现 比较 迟缓 ， 如 图 6-4 一 图 6-8 
所 示 。 





Firefox39: 


Clear Persist Profile CD Errors Warnings Info Deb Run Clear Copy Pretty Print History 
var div = document. eElement(“div") var span ...uterHTML) var div = document.createElement ("div") 
ole. log("outerTe: PAI OS rText) var span = ——_ t.createElement ("span") 
var text = document.createTextNode("“test") 
inner oe xmins="http://www.w3.org span.appendChild( text) 
PRE eae >te Sela div.appendChild(span) 
console.log(“inner#TML",div.innerHTML) 
coos ti console.log("innerText",div.innerText) 
outerHTML <div xmlns="http: //www.w3.org/1999/xhtml"> console.log( “outer#TML",div.outerHTML) 


<span>test</span></div> console.log("“outerText",div.outerText) 


图 6-4 










Waits UI 响 应 








Cx 

A DOM7@11: [tka EARS T Rio oe > HKMS. SR: nttp://go.microsoft.com/fwlink/?LinkID=291337 
Zit: test.html 

和 HTL1368: 进行 了 导航 。 

文件 : test.html 

innerHTML <span>test</span> 











innerText test 
outerHTML <div><span>test</span></div> 
outerText test 


图 6-5 


IE11 的 IE6 模 式 : 





DOM 资源 管理 器 控制 台 

O°} Ai 0: 
A 附加 页 针对 的 是 文档 述 : : 
Å 0on7e11: 此 页 上 的 代码 禁用 了 友 向 和 正 向 缓存 。 有 关 详 细 信 息 ， 

文件 : test.html 
@ 1111300: 进行 了 导航 。 

文件 : test.html 

innerHTML <SPAN>test</SPAN> 

innerText test 

outerHTML 

<DIV><SPAN>test</SPAN></DIV> 

outerText test 




















。 部 分 控制 台 AP 和 功能 可 能 无 

















请 参阅 : http://go.microsoft.com/fwlink/?LinkID=291337 


图 6-6 


Chrome49: 


S Y top v Preserve log 


+ var div = document.createElement ("div") 
var span = document. createElement("span") 
var text = document.createTextNode("test") 
span.appendChild (text) 
div.appendChild(span) 
console. log("innerHTML", div. innerHTML) 
console. log("innerText",div.innerText) 
console. log("outerHTML",div.outerHTML) 
console. log("outerText",div.outerText) 


innerHTML <span>test</span> 

innerText test 

outerHTML <div><span>test</span></div> 
outerText test 


图 6-7 


Safari9: 


> var div = document. createElement ("div") 
var span = document.createElement ("span") 
var text = document.createTextNode("“test") 
Span. appendChild( text) 
div.appendChild(span) 
console. log("innerHTML" , div. innerHTML) 
console. log(“innerText",div. innerText) 
console. log(“outerHTML" ,div.outerHTML) 
console. log(“outerText",div.outerText) 


E innerHTML - *<span>test</span>" 

E innerText — "test" 

E outerHTML - "<div><span>test</span></div>" 
E outerText — "test" 


图 6-8 


我 们 首先 从 简单 的 innerText 哺 起 。 虽 然 标 准 浏 


览 器 有 一 个 很 相似 的 textContent 来 实现 此 功能 ， 但 
它 与 innerText 义 有 稍微 的 区 别 。 





(1) textContent 会 获取 所 有 元 系 的 content， 包 
括 <script> 和 <style> LA- 


(2) innerText 不 会 获取 display:none 的 元 素 的 


content， 而 textContent 会 。 


(3) innerText 会 触发 reflow， 而 textContent 不 


(4) innerText 返 回 值 会 被 格式 化 ， 而 


textContent 不 会 。 


E firefox FHA EN, FEA EEH Rangex} 
象 搞定 : 





var p = typeof HTMLElement !== 'undefine' && HTMLElement.protot 


ype 
if (!('outerHTML' in p)) { 
p.__defineSetter__('outerHTML', function (s) { 
var r = this.ownerDocument.createRange( ) 


r.setStartBefore(this) 
var df = r.createContextualFragment(s) 
this.parentNode.replaceChild(df, this) 


return s 
}); 
p.__defineGetter__('outerHTML', function () { 
var a = this.attributes, str = '<' + this.tagName, i = 


for (; i < a.length; i++) { 
if (a[i].specified) { 
str += ' ' + a[i].name + '=' + JSON.stringify(a 
[i].value) 
} 
} 
if (!this.canHaveChildren) 
return str + ' />' 
return str + '>' + this.innerHTML + '</' + this.tagName 
+ 's! 


}) 


p. defineGetter_ ('canHaveChildren', function () { 
return !/A(area|base|basefont|col|frame|hr|img|br|input 
|isindex|link|meta|param)$/ 
i.test(this.tagName) 
}) 
} 


if (!('innerText' in p)) { 

p.__ defineSetter__('innerText', function (sText) { 
var parsedText = document.createTextNode(sText ) 
this.innerHTML = "" 
this.appendChild(parsedText ) 
return parsedText 

}) 

p. defineGetter__('innerText', function () { 
var r = this.ownerDocument.createRange( ) 
r.selectNodeContents(this) 
return r.toString() 


}) 
} 


if (!('outerText' in p)) { 
p. defineSetter__("outerText", function (sText) { 
var parsedText = document.createTextNode(sText ) 


this.parentNode.replaceChild(parsedText, this) 
return parsedText 

}) 

p.__ defineGetter__('outerText', function () { 
var r = this.ownerDocument.createRange( ) 
r.selectNodeContents(this) 
return r.toString() 


}) 








如 果 想 兼容 XML ， 还 可 以 使 用 以 下 方法 : 








function outerHTML(el) { // 主 要 是 用 于 XML 
switch (el.nodeType + '') { 
case '1': 
case '9': 
return "xml" in el ? el.xml : new XMLSerializer(). 
serializeToString(el) 
case '3': 


return el.nodeValue 
case '8': 

return '<!--'+ el.nodeValuet+'-->' 
default: 

return '' 


} 
function innerHTML(el) { // 主 要 是 用 于 XML 
for (var i = 0, c, ret = []; c = el.childNodes[i++];) { 
ret.push(outerHTML(c) ) 
} 


return ret.join("") 





} 


function getText() { 
// 获 取 某 个 节点 的 文本 ， 如 果 此 节点 为 元 素 节 点 ， 则 取 其 childNodes 的 所 有 文 








return function getText(nodes) { 
for (var i= 0, ret = '' node; node = nodes[i++];) { 
// 处 理 的 文本 节点 与 CDATA 的 内 容 




















if (node.nodeType === 3 || node.nodeType === 4) { 











ret += node.nodevalue // 取 得 元 素 节点 的 内 容 
} else if (node.nodeType !== 8) { 
ret += getText(node.childNodes ) 
} 
} 


return ret 


}() 





6.7 模板 容 絮 元 系 


随 着 前 端 模板 或 MVVM 的 流行 ， 我 们 需要 一 些 
元 素 作为 容器 或 作为 模板 的 载体 。 最 香 见 的 是 ， 使 
用 script/textarea 来 存放 模板 代码 ， 然 后 使 用 
innerHTML/value 属 性 来 获取 模板 内 容 进 行 解析 和 
PER - 








<script type="text/x-template" id="tpl"> 
<h1><%=data.title%></h1> 
<p><%=data.content%></p> 


var htmlTpl = document.getElementById("tpl").innerHTML; 
tplEngine(htmlTpl, { 

title: "This is title", 

content: "This is content" 


了 
</script> 





AS tH EE WA BS 8 YR 
RS} ZAHTMLS st th rm HJ template7t & « 


<script>, RIDERA texta tE, FAIH 


type 属 性 为 一 个 浏览 器 不 认识 的 MIME 值 ， 它 的 内 
容 就 不 会 执行 。 它 的 优势 是 天 然 不 显示 。 缺 点 是 不 
能 套 般 出 现 script 标 俭 。 


<noscript> ， 在 浏览 器 普 授 文 持 JavaScript 的 
情况 下 ， 作 为 模板 容器 算是 为 它 找 到 一 份 副 业 。 但 
它 有 严 草 的 兼容 性 问题 ， 因 此 建议 只 用 于 IE9 十 。 
具体 表现 为 E7、IE8 使 用 innerText、innerHTML 都 
无 法 得 其 内 容 ，IE9 只 能 用 innerText。 下 面 是 
avalon1.4 时 的 兼容 方法 : 











var rnoscript = /<noscript.*?>(?:[\s\S]+?)<\/noscript>/img 
function getNoscriptText(el) { 
//IE9~IE11 与 Chrome 的 jnnerHTML 会 得 到 转 义 的 内 容 ， 它 们 的 jnnerText 可 





以 
if (el.textContent && /\S+/.test(el.textContent)) { 
return el.textContent 











} 
//TE7~IE8 innerText,innerHTML 都 无 法 取得 其 内 容 ，IE6 能 取得 其 ijnner 
HTML 
if (IEVersion === 6 || IEVersion > 8 || window.netscape) { 
return el.innerHTML 











} 

//IE7、IE8 需 要 用 AJAX 请 求 得 到 当前 页 面 进行 抽取 

var xhr = getXHR() 

xhr.open("GET", location, false) 

xhr.send(null) 
//http://bbs.csdn.net/topics/390349046? page=1#post - 39349265 








var noscripts = DOC.getElementsByTagName("noscript" ) 


var array = (xhr.responseText || "").match(rnoscripts) || [ 


var n = array.length 
for (var i = 0; i < n; i++) { 
var tag = noscripts[i] 
if (tag) { 
//IE6~IE8 中 noscript 标 签 的 innerHTML, ijnnerText 是 只 读 的 
//http://blog. jobbole.com/50787/ 
tag.style.display = "none" 
tag.textContext = (array[i].match(rnoscriptText) | | 
pa np 


return el.textContent 





<textarea> ， 这 个 也 很 常用 ， 但 有 两 个 缺点 ， 
一 是 天 然 不 隐形 ; 二 是 需要 额外 的 设置 display: 
none， 并 且 内 容 不 能 再 套 <textarea> 。 


<xmp> ， 这 是 一 个 很 老 很 尾 殊 的 标签 ， 语 义 为 
example， 示 例 。 据 说 后 来 被 <pre> 标 丛 取代 而 废 
IE, 实际 上 ， 目 前 所 有 的 浏览 器 都 是 文 持 的 。 但 
是 ， 其 跟 <pre> 标签 不 能 划 等 号 。<pre> 里 面 有 个 
<img> 标签 ， 它 会 转换 为 一 个 元 素 市 点 作为 孩子 。 
而 <xmp> 里 面 无 法 加 多 个 标签 ， 里 面 只 有 一 个 文本 








节点 作为 独子 。 由 于 是 文本 市 点 ， 因 此 里 面 的 
img、script 标 签 不 会 发 出 请 求 ， 也 不 存在 套 舱 问 
题 。<xmp> 是 旧时 代 作 为 模板 容器 的 最 佳 选择 ， 缺 
点 只 有 一 个 ， 天 然 不 隐形 。 


<template> 最 早 是 Chrome 为 了 文 持 polymer 项 
A, 司 已 突现 的 一 个 征订 8- 相 比 士 厅 于 些 76 条 ， 
拥有 以 下 优势 。 


(1) TRADER, Nii 


display: none. 


(2) 元 素 可 以 放 在 任意 位 置 。 





(3) 比 xmp 更 加 激进 ， 它 里 面 一 个 节点 也 没 
有 。 但 通过 访问 content 必 性， 你 能 得 到 其 文档 雁 毛 
对 象 ; 访问 innerHTML， 可 以 得 到 之 前 的 用 户 设 置 
的 内 容 。 由 于 没有 市 点 ， 这 样 束 不 影响 
querySelectorAll 的 效率 。 





(4) template 元 系 可 以 继续 套 template 元 素 。 
里 面 的 img、script 世 点 不 会 发 出 请 求 ， 里 面 的 style 
元 系 不 会 影响 外 和 面 的 样式 。 








唯一 不 济 的 是 ， 它 的 兼容 性 不 够 好 ， 如 图 6-9 
FITAR o 


Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit) 


Basic support 26 22 (22) Edge 13 15 7.1 


图 6-9 


6.8 iframe 元 素 


iframe 是 一 个 上 古老 的 标签 ， 在 IE3 时 已 经 存在 

了 。 由 于 它 是 用 作 镶 骨 男 一 个 页 面 到 主页 面 ， 因 此 
肯定 与 一 般 的 元 素 不 同 ， 创 建 起 来 也 不 是 一 般 有 的 消 
耗资 源 ， 并 且 消 耗 连 接 数 。 但 它 却 是 一 个 物 超 所 值 
的 东西 ， 有 了 它 ， 我 们 可 以 无 障碍 地 实现 无 颖 刷 

新 ， 通 过 保存 历史 模拟 onhashchange， 安 全 地 加 载 
第 三 方 资 源 与 广告， 实现 宇文 本 编辑 器 、 文 件 上 

传 ， 用 它 搞 定 正 6 一 正 7 的 selectbug， 在 iframe 里 做 
特征 侦 测 .……HITML5 为 它 添加 了 3 个 属性 ， 让 它 变 
得 更 强大 。 











由 于 iframe 太 古老 ， 因 此 相关 的 兼容 性 问题 及 
对 应 的 hack 不 在 少数 ， 本 节 束 特意 详细 地 讲解 它 。 


自 先 是 样式 问题 。 


(1) 想 要 隐藏 iframe 那 个 很 粗 的 边框 时 ， 我 们 
需要 用 到 frameBorder 属 性 ， 例 如 使 用 Dreamweaver 
可 以 生成 如 下 代码 。 


<iframe frameborder=0 src='xxxx' width='xxx' height='xxx!></ifr 
ame> 





ss 


换 成 JavaScript， 需 要 这 样 写 : 


var iframe = document.createElement('iframe'); 
iframe.frameBorder=0;//Firefox 和 IE 均 有 效 ， 相 当 于 CSS 中 的 "border:0 no 
ne" 








(2) 去 卸 iframe 中 的 滚动 条 : 


iframe.scrolling = "no"; 


(3) 设置 iframe 和 透明 ， 需 要 分 两 步 走 。 


© iframe 目 身 设 置 allowTransparency 属 性 为 
true〈 但 设置 了 allowTransparency=true 就 遮 不 住 


select) 。 


(2) iframe 中 的 文档 ，background-color 或 body 元 
系 的 bgColor 属 性 必须 设置 为 transparent。 


具体 代码 如 下 。 


// 1. 包含 iframe 页 面 的 代码 。 

<body bgColor="#eeeeee"> <iframe allowTransparency="true" src=" 
transparent.htm"> </iframe> 

// 2. transparent ,htm 页 的 代码 。 





<body bgColor="transparent"> 








然后 是 获取 iframe 中 的 各 种 重要 对 象 。 


(1) 获取 iframe 中 的 window 对 象 。 


function getIframewindow(node) { 
return node.contentWindow; 


} 





(2) 获取 iframe 中 的 文档 对 象 。 


function getIframeDocument(node) { //w3c || IE 
return node.contentDocument || node.contentWindow. document; 





判定 页 面 是 合 在 iframe 里 面 。 


window.onload = function() { 
alert(window != window. top) 
alert(window.frameElement !== null); 
alert(window.eval !== top.eval) 





判定 iframe 是 否 加 载 完毕 。 


if (iframe.addEventListener) { 
iframe.addEventListener("load", callback, false); 
} else { 
iframe.attachEvent("onload", callback) 


} 








不 过 ， 如 果 是 动态 创建 iframe 时 ，webkit 系 统 
浏览 器 可 能 会 出 现 二 次 触发 onload 事 件 的 问题 。 








<div id="times">0</div> 
<script> 
window.onload = function(){ 
var c = document.getElementById("times"); 
var iframe = document.createElement("iframe"); 
iframe.onload = function(){ c.innerHTML = ++c.innerHTML } 


document .body.appendChild(iframe); 
iframe.src = "http://www.cnblogs.com/rubylouvre" 


</script> 





估计 Safari 和 Chrome 在 appendChild 之 后 束 进 行 





第 一 次 加 载 ， 并 且 在 设置 src 之 前 加 载 完毕 ， 所 以 触 
发 了 两 次 。 如 果 在 插入 body 之 前 给 iframe 随 便 设 置 
一 个 src《〈 除 了 空 值 ) ， 间 接 加 长 第 一 次 加 载 ， 那 么 

只 触发 了 一 次 。 不 设置 或 空 值 的 src 相 当 于 链接 
at (ANNs 








动态 创建 iframe 时 ， 如 果 想 用 到 name 属 性 ， 用 
document.createElement("iframe") 创 建 再 设置 它 的 
name 属 性 ，IE6、IE7 是 无 法 辨识 此 值 的 。 





window.onload = function(){ 
var iframe = document.createElement("iframe"); 


iframe.name = "xxx": 
document .body.appendChild(iframe) ; 
iframe.src = "http://www.cnblogs.com/rubylouvre/" 


alert(frames["xxx"]);//undefined 
alert(document .getElementsByName("xxx").length)//0 


a 


因此 我 们 需要 针对 IE6、IE7， 使 用 下 特有 的 创 
建 元 素 时 连 属性 一 起 创建 的 方式 实现 。 


if ("1"[0]) {//AIE6、IE7 这 里 返回 undefined, 于 是 跑 到 第 二 个 分 支 
var iframe = document.createElement("iframe"); 
iframe.name = name; 
} else { 
iframe = document.createElement('<iframe name="' + name + ' 


va by 


J 








iframe 与 父 窗 口 共享 history， 基 于 它 我 们 可 以 
解决 Ajax 的 后 退 按 钮 问题 。 里 面 的 细节 非常 多 ， 这 
里 束 不 展开 了 ，github 上 有 了 两 个 著名 的 项 目 ， 可 以 
帮 你 解决 工作 的 绝 大 多 数 问 题 。 





https://github.com/browserstate/history.js 
https://github.com/devote/HTML5-History-API 








清 衬 iframe 内容， 不 保留 历史 的 写法 : 


iframeWindow. location.replace('about:blank'); 





IE6 Hiframe.src="about:blank"7Ehttps Hpi FE 
出 现 问 题 ， 需 要 用 javascript:false 修 正 ， 虽 然 速 度 非 


常 慢 。 


6.9 ”总结 


节点 操作 是 驱动 页 面 变动 的 核心 ， 围 绕 它 的 
API 多 如 牛 毛 。 本 章 挑 出 来 的 东西 只 是 九 牛 一 毛 ， 
想 深 入 还 需要 经 常 浏览 MSDN，MDN 等 网 站 。 对 不 
同 浏览 颖 的 私有 API 的 掌握 程度 ， 和 直接 决定 了 你 解 
决 兼容 性 问题 的 思路 与 水 准 。 大 家 在 日 常 开发 中 一 
点 点 积累 吧 ， 如 图 6-10 所 示 。 
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图 6-10 


HTML5 带 来 一 系列 新 API， 让 DOM 编 程 更 加 
丰富 多 彩 ， 而 本 章 旋 致 全 书 也 不 能 涵盖 这 所 有 内 
容 ， 因 此 大 家 需要 时 刻 留 意 浏 览 右 厂商 的 官网 。 


[1] DOM4 中 一 共 添 加 了 before、after、 


+H 


replaceWith, remove. prepend, append 6 个 增删 节 
点 的 API。 


FTE ”数据 绥 存 模块 








数据 缓存 系统 最 早 应 该 是 jQuery 1.2 引 入 的 ， 
它 是 用 于 关联 操作 对 象 和 与 之 相关 的 数据 的 一 种 机 
制 。 在 DOM 中 ， 我 们 通 沼 操作 的 数据 有 3 种 ， 元 素 


节点 、 文 档 对 象 与 window 对 象 。 那 时 jQuery 的 事件 
系统 完全 照搬 DE“ 大 牛人 ”的 addEvent.js， 而 
addEvent 在 实现 上 有 个 缺憾 ， 它 把 事件 的 回调 都 放 
到 EventTarget 之 上 ， 这 会 引发 循环 引用 ， 如 果 
EventTarget 是 window 对 象 ， 义 会 引发 全 局 污染 。 有 
了 数据 绥 存 系统 ， 除 了 规避 这 两 个 风险 外 ， 我 们 还 
可 以 有 效 地 保存 不 同方 法 产生 的 中 间 变 量 ， 而 这 些 
变量 会 对 为 一 个 模块 的 方法 有 用 ， 解 古方 法 间 的 依 
赖 。 对 于 jQuery 来 说 ， 它 的 事件 克隆 乃至 后 来 的 队 
列 实现 都 离 不 开 绥 存 系统 。 








7.1 jQuery 的 第 1 代 绥 人 存 系统 


jQuery1.2 在 core 模 块 新 增 了 两 个 静态 方法 ， 
data 与 removeData。data 不 用 说 ， 与 jQuery 其 他 方法 
一 样 ， 访 与 结合 。jQuery 的 绥 存 系统 是 把 所 有 数据 
都 放 在 $.cache 仓库 之 上 ， 然 后 为 每 个 要 使 用 绥 存 
系统 的 元 系 节 点 、 文 档 对 象 与 window 对 象 都 分 配 一 
个 UUID。UUID 的 属性 名 为 一 个 随机 的 自 定义 属 
性 ，"jQuery" + (new Date()).getTime()， 值 为 
整数 ， 从 零 递增 ,但 UUID 总 要 附 于 一 个 对 象 上 ， 
如 果 那 个 对 象 是 window， 沁 不 是 全 局 污染 吗 ? 因 此 
jQuery 内 部 判定 它 是 window 对 象 时 ， 了 映射 为 一 个 叫 
windowData 的 空 对 象 ， 然 后 UUID 加 在 它 之 上 。 有 
了 UUID， 我 们 在 首次 访问 缓存 系统 时 ， 会 
在 $.cache 对 象 开 辟 一 个 空 对 象 〈 绥 存 体 ) ， 用 于 
放置 与 目标 对 象 有 关 的 东西 。 这 有 点 像 “ 银 行 开 
户 ”，UUID 的 值 惑 是 “ 存 打 ”。removeData 则 会 删 掉 




















不 再 需要 保存 数据 ， 如 琳 到 最 后 ， 数 据 删 光 了 ， 它 
也 没有 任何 键 值 对 应 ， 则 成 为 空 对 象 ，jQuery 就 会 
从 $.cache 中 删 探 此 对 象 ， 并 从 目标 对 象 移 除 
UUID. 





//jQuery1.2.3 





var expando = "jQuery" + (new Date()).getTime(), uuid = 0, wind 
OwData = {}; 
jQuery.extend({ 
cache: {}, 
data: function( elem, name, data ) { 
elem = elem == sete ? windowData :elem; 
// 对 window 对 象 做 特别 处 理 

















var id = elem[ expando ]; 
if ( lid ) // 如 果 没 有 UUID 则 新 设 一 
id = elem[ expando ] = ++uuid; 
// 如 果 没 有 在 $. cache 中 开户 ， 则 先 开户 
if ( name && !jQuery.cache[ id ] ) 
jQuery.cache[ id ] = {}; 


// 第 3 个 参数 不 为 undefined 时 ， 为 写 操作 
if ( data != undefined ) 
jQuery.cache[ id ][ name ] = data; 
// 如 果 只 有 1 个 参数 ， 则 返回 缓存 对 象 ，2 个 参数 则 返回 目标 数据 


return name ? jQuery.cache[ id ][ name ] : id; 








ty 


removeData: function( elem, name ) { 
elem = elem == window ? windowData : elem; 
var id = elem[ expando ]; 
if ( name ) {// 移 除 目标 数据 
if ( jQuery.cache[ id ] ) { 
delete jQuery.cache[ id ][ name ]; 
name = nes 


for ( name in jQuery.cache[ id ] ) 
break; 


// 遍 历 缓存 体 ， 如 果 不 为 空 ， 那 name 会 被 改写 ， 如 果 没 有 被 改写 

















， 则 !name true 
// 从 而 引发 再 次 调用 此 方法 ， 但 这 次 是 只 传 一 个 参数 ， 移 除 绥 存 





体 
if ( !name ) 
jQuery.removeData( elem ); 


} else { 
// 移 除 UUID， 但 IE 下 对 元 素 使 用 delete 会 抛 错 
try { 
delete elem[ expando ]; 
} catch(e){ 
if ( elem.removeAttribute ) 
elem.removeAttribute( expando ); 
}// 注 销 账 户 
delete jQuery .cache[ id ]; 











jQuery 在 1.2.3 版 本 中 添加 了 两 个 同名 的 原型 方 





法 data 与 removeData， 目 的 是 方便 链 式 操作 与 集 化 
操作 ， 并 在 data 中 添加 了 getData、setData 的 目 定 义 
事件 的 触发 逻辑 。 


在 jQuery 1.3 中 ， 数 据 缓存 系 统 终于 独立 成 一 
个 模块 data.js《 内 部 开发 时 的 划分 ) ， 并 添加 了 两 
组 方法 ， 分 别 是 命名 空间 上 的 queue 与 dequeue 和 原 
型 上 的 queue 与 dequeue。queue 的 目的 很 明显 ， 就 是 





绥 存 一 组 数据 ， 为 动画 模块 服务 。dequeue 古 从 一 
组 数据 中 删 挥 一 个 。 


//jQuery1.3 
jQuery.extend({ 
queue: function( elem, type, data ) { 
if ( elem ){ 

type = (type || "fx") + "queue"; 

var q = jQuery.data( elem, type ); 

if ( !q || jQuery.isArray(data) )// 确 保 储存 的 是 一 个 数组 

q = jQuery.data( elem, type, jQuery.makeArray(d 




















else if( data )// 然 后 往 这 个 数据 加 东西 
q.push( data ); 
} 
return q; 
ty 
dequeue: function( elem, type ){ 
var queue = jQuery.queue( elem, type ), 
fn = queue.shift();//ABiHi—+, SWC RRA, Ae 
BE BL Va FYB 
// 但 没有 做 是 否 为 函数 的 判定 ， 估 计 也 没有 写 到 文档 中 ， 为 内 部 使 用 
if( !type || type === "fx" ) 
fn = queue[O]; 
if( fn !== undefined ) 
fn.call(elem); 






































fx 模块 animate 方 法 的 调用 示例 如 下 。 



































//each 是 并 行 处 理 多 个 动画 , queue 是 一 个 接 一 个 处 理 多 个 动画 
this[ optall.queue === false ? "each" : "queue" ](function(){ / 








*He*/}) 








在 元 素 上 添加 自 定 义 必 性， 还 会 引发 一 个 问 
题 。 如 有 果 我 们 对 这 个 元 系 进 行 找 贝 ， 束 会 将 此 属性 
也 复制 过 去 ， 导 致 两 个 元 素 都 有 相同 的 UUID 值 ， 
出 现 数据 被 错误 操作 的 情况 。jQuery 早 期 的 复制 节 
点 实现 非常 简 持 ， 如 果 元 系 的 doneNode 方 法 不 会 
复制 事件 ， 束 使 用 cloneNode， 奋 则 使 用 元 素 的 
outerHTML 或 父 节点 的 innerHTML， 用 clean 方 法 解 
析 一 个 新 元 聚 出 来 。 但 outerHTML 与 innerHTML 都 
会 将 属性 写 在 里 面 ， 因 此 需要 用 正则 把 它们 清除 
挥 。 





























//jQuery1.3.2 core.js clone 方 法 
var ret = this.map(function(){ 
if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) 
) i 
var html = this.outerHTML; 
if ( !html ) { 
var div = this.ownerDocument.createElement("div"); 
div.appendChild( this.cloneNode(true) ); 
html = div.innerHTML; 
} 


return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|n 
, "").replace (/4\s*/, "")])[0]; 





在 jQuery 1.4 中 ， 我 们 发 现 它 对 object . embed 
、applet 这 3 种 元 系 进 行 了 特殊 处 理 ， 缘 由 这 3 个 元 
系 是 用 于 加 载 外 部 资源 的 ， 比 如 flash、silverlight、 
media play. realone player、window 自 带 的 日 历 组 
件 、 颜 色 选 择 器 等 。 在 旧版 本 正中 ， 元 系 节 点 只 是 
COM 的 包装 ， 一 旦 引入 这 些 资 源 后 ， 它 束 会 变 成 那 
种 资源 的 实例 。 一 旦 这 资源 是 由 VB 等 语言 写 的 ， 
由 于 VM 有 严格 的 访问 控制 ， 不 能 随便 给 对 象 添加 
新 属性 与 方法 ， 吏 会 遇 到 抛 错 的 可 能 。 因 此 jQuery 
做 出 一 个 决定 ， 对 于 这 3 种 元 素 ， 吏 不 为 它们 组 存 
数据 。jQuery 在 内 部 弄 了 一 个 叫 noData 的 对 象 ， 专 
门 放置 它们 的 tagName。 

















noData: { 
"embed": true, 
"object": true, 
"applet": true 


ty 
// 代 码 防御 


if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase( ) 


]) í 


return; 


} 





jQuery1.4 还 对 $.data 进 行 了 改进 ， 人 允许 第 二 个 
参数 为 对 象 ， 方 便 储存 多 个 数据 。UUID 对 应 的 自 
定义 属性 expando 也 放 进 命名 空间 之 下 了 。queue 与 
dequeue 方 法 被 剥离 成 一 个 新 模块 。 





jQuery1.43 带 来 3 项 改进 。 





首先 是 添加 changeData 上 自 定 义 方 法 ， 不 过 这 套 
方法 没有 什么 销量 ， 只 是 产品 经 理 的 目 恋 吧 。 











其 次 ， 检 测 元 素 世 点 是 人 否 文 持 添加 目 定义 属性 
的 逻辑 被 独立 成 一 个 叫 acceptData 的 方法 。 因 为 
jQuery 团队 发 现 当 object 标 签 加 载 flash 资 源 时 ， 它 还 
是 可 以 添加 自 定义 属性 的 ， 于 是 决定 对 这 种 情况 网 
开 一 面 。IE 在 加 载 flash 时 ， 需 要 对 object 指 定 一 个 
叫 classId 的 属性 ， 值 为 clsid:D27CDB6E- AE6D- 
11cf-96B8-444553540000 ， 因 此 检测 逻辑 就 变 得 非 
常 复杂 ， 由 于 data、removeData 都 要 用 到 ， 独 立 出 
来 可 有 效 节 省 比特 。 








最 后 HIML5 对 人 们 随便 添加 目 定义 属性 的 行 

为 做 出 回应 ， 新 增 一 种 叫 data-* 的 缓存 机 制 。 当 用 
户 设置 的 属性 以 data- 开头 ， 它 们 会 被 保存 到 元 又 
节点 的 dataset 对 象 上 。 于 是 jQuery 团队 又 有 一 个 主 
意 ， 人 允许 人 们 通过 设置 data-* 来 配置 UI 组 件 ， 于 是 
他 们 对 data-* 进行 如 下 增强 : 当 用 户 第 一 次 访问 此 
元 素 节 点 ， 会 表 历 它 所 有 data- 开头 的 目 定 义 属 性 

(为 了 照顾 旧版 本 正 ， 不 能 直接 过 历 dataset) ， 把 
它们 放 到 jQuery 的 缓存 体 中 。 那 么 当 用 望 取 数据 
时 ， 会 先 从 缓存 系统 中 获取 ， 没 有 再 使 用 
setAttribute 访 问 "data-" 目 定义 属性 。 但 HTML5 的 绥 
FERRARIS, ARERR OX SPARE TB 
环 引 用 的 考量 ) ， 于 是 jQuery 会 将 它们 还 原 为 各 种 
数据 类 型 ， 如 “null ”false ”true ” 变 成 null、 
false、true， 符 合 数字 格式 的 字符 串 会 转换 成 数 
F, WREE FA 以 } 结尾 则 答 试 转 成 一 个 对 
象 。 




















//jQuery1.43 $.fn.data 
rbrace = /A(?:\{.*\} IAL. *\] $7; 
if ( data === undefined && this.length ) { 
data = jQuery.data( this[0], key ); 
if ( data === undefined && this[0].nodeType === 1 ) { 
data = this[0].getAttribute( "data-" + key ); 


" ? true : 
? false : 
=== ? null : 
!j]Query.isNaN( data ) ? parseFloat( data ) 


rbrace.test( data ) ? jQuery.parseJSON( dat 


data; 
} catch( e ) {} 


} else { 
data = undefined; 





jQuery 在 1.42 版 已 经 打败 了 Prototype.js， 导致 
用 户 量 苔 增 。 它 的 重点 改 为 提升 性 能 ， 进 入 FBUG 
阶段 《用户 多 ， 相 当 于 免费 的 测试 员 就 越 多 ， 测 试 
履 盖 面 就 越 大 ) ， 所 以 jQuery1.5 也 带 来 了 3 项 改 
ts 











首先 是 改进 了 expando。 原 来 expando 是 基于 时 





则 和 截 ， 现 在 是 版 本 号 加 随机 数 。 因 此 用 户 可 能 在 一 
个 页 面 引 入 多 个 版 本 的 jQuery。 


其 次 ， 是 否 有 此 数据 的 逻辑 被 抽出 成 一 个 
hasData 方 法 ， 处 理 HIML5 的 "data-*" 属 性 也 被 抽出 
成 一 个 私有 方法 dataAttr。 它 们 都 是 为 了 逻辑 显得 更 
清晰 。 


最 后 是 dataAttr 使 用 了 JSON.parse。 由 于 这 个 
JSON 可 能 是 JSON2.js 引 入 的 ， 而 JSON2.j$S 有 个 非常 
糟 粹 的 地 方 ， 束 是 为 一 系列 原生 类 型 添加 了 toJSON 
方法 ， 导 致 for in 循环 判定 是 个 为 空 对 象 出 错 。 
jQuery 被 逼 搞 了 个 isEmptyDataObject 方 法 做 处 理 。 














jQuery 的 数据 缓存 系统 本 来 束 是 为 事件 系统 服 
务 而 分 化 出 来 的 ， 到 后 来 ， 它 是 内 部 众多 模块 的 基 
础 设施 。 换 言 之 ， 它 是 供 框 架 目 己 内 部 使 用 的 ， 但 
一 旦 它 公 开 到 文档 中 ， 不 可 避免 地 ， 用 户 会 使 用 
data 方 法 来 保存 他 们 在 工作 业务 中 用 到 的 数据 。 




















IE, WRB) AERA AA Nol. ALA BL 
据 (框架 使 用 的 ) 与 用 户 数 据 CAP a GIEH 
的 ) ， 你 不 能 设置 一 个 优先 级 来 阻止 它们 的 互相 履 
mm, ALAA SILA Ba, PY RENES HI ZEB 
就 不 能 运作 ， 比 如 事件 系统 在 每 个 元 素 的 缓存 体 上 
设置 的 events 对 象 。 而 你 让 用 户 设 置 的 数据 莫名 其 
妙 不 能 生效 ， 这 也 是 无 法 让 人 接受 的 。 因 此 早期 
jQuery 作出 的 让 步 是 ， 框 架 使 用 的 私有 数据 的 属性 
名 会 尽 可 能 的 生 辛 复 森 ， 尺 量 减 少 重 名 的 可 能 ， 比 
WH class, 














_change__ ~ _submit_attached 


~ _change_attached 。 


{A 4 jQuery UI 越 来 越 庞大 时 ， 它 们 对 数据 缓存 
的 依赖 也 人 鳃 发 严重 。 同 样 的 压力 也 来 目 普 通用 户 。 
当 jQuery 成 为 世界 级 的 著名 框架 后 ， 用 户 数 据 与 私 
有 数据 发 生 冲 突 的 机 率 也 束 大 大 增加 。jQuery1.5 对 
缓存 体 进行 改造 。 原 来 就 是 一 个 对 象 ， 现 在 什么 数 
据 都 往 里 面 抛 ， 它 束 在 这 个 缓存 体内 开辟 了 一 个 子 





对 象 ， 键 名 为 随机 的 jauery,.expando 值 ， 如 果 是 私 
有 数据 就 存 到 里 面 去 。 但 events 私 有 数据 为 了 同 前 
兼容 起 见 ， 还 是 直接 放 到 缓存 体 之 上 。 侍 于， 如 何 
区 分 私有 数据 ， 非 单 向 单 ， 直 接 在 data 方 法 添加 第 
个 参数 ， 真 值 时 为 私有 数据 。 es 
提供 第 3 个 参数 ， 用 于 删除 私有 数据 。 还 新 设 了 一 
个 _data 方 法 ， 专 门 用 于 操作 私有 数据 。 图 7-1 Hise 
绥 存 体 的 结构 图 。 





var cache = { 
jQuery14312343254:{/* 放 置 私 有 数据 */}， 
events: {/* 放 置 事件 名 与 它 对 应 的 回调 列表 */} 
/* 这 里 放置 用 户 数 据 */ 











jQuery.expando: 
jQuery2110223371810123 
4255 


jQuery211022337181012384255= | 1 | 


jQuery.cache[ 钥匙 ].data 


用 户 数 据 





图 7-1 


jQuery1.7 对 缓存 体 做 了 改进 ， 系 统 变 量 便 放 置 
在 data 对 象 中 ， 为 此 判定 缓存 体 为 空 也 要 做 相应 的 
改进 ， 现 在 要 跳 过 toJSON 与 data， 新 结构 如 下 。 


var cache = { 
data:{/* 放 置 用 户 数据 */} 
/* 这 里 放置 私有 数据 */ 





jQuery 1.8 曾 添加 了 一 个 叫 deleteIds 的 数组 ， 
用 于 重用 UUID， 但 县 花 一 现 。UUID 的 值 从 jQuery 
1.8 起 就 不 用 jQuery.uuid 了 ， 改 用 jQuery.guid 递 增生 
成 。 现 在 光 是 绥 存 系统 不 是 一 个 庞大 家 族 ， 如 图 7- 
QATAR 











hawWata 


removeDate 








7.2 ”jQuery 的 第 2 代 绥 存 系 统 


第 2 代 绥 存 系统 的 作者 为 Rick Waldrons W HEME 
的 话 ， 要 实现 以 下 6 个 目标 。 


(1) 在 接口 与 语义 上 羔 容 1.9.x 分 支 。 








(2) 通过 简化 储存 路 径 为 统一 的 方式 来 提高 
维护 性 。 


G) 使 用 相同 的 机 制 来 实现 “私有 ”与 “用 
PBT 0 


(4) 不 再 把 私有 效 据 与 用 户 数据 混在 一 起 。 








(5) 不 再 在 用 户 对 象 上 添加 目 定 义 属性 。 


(6) 方便 以 后 可 以 平 请 地 利用 WeakMap 对 对 
象 进行 升级 《WeakMap 相 关 规 范 大 致 在 2014 年 完 
成 ) 。 








jQuery 第 2 代 绥 存 系 统 的 实现 方法 是 valueOf 重 
写 ! 具体 原理 是 ， 如 条 目标 对 象 的 valueOf 传 入 一 
个 特殊 的 对 象 ， 那 么 它 就 返回 一 个 UUID， 然 后 通 
过 UUID 在 Data 实 例 的 cache 对 象 属性 上 开辟 缓存 
体 。 这 样 一 来 ， 我 们 就 不 用 区 分 它 是 window 对 象 ， 
还 是 使 用 windowData 来 做 符 届 了 。 另 外， 我 们 也 不 
用 顾忌 embed、object、applet 这 3 种 在 正 下 可 能 无 法 
设置 私有 属性 的 元 素 节 点 ， 达 成 第 2 和 第 5 个 目标 。 











在 第 1 代 绥 人 存 系 统 中 ， 每 个 缓存 体 的 结构 为 一 
个 拥有 data 对 象 属 性 的 对 象 ，data 对 象 属性 里 面 放 
用 户 数 据 ， 而 缓存 体 的 其 他 键 值 用 于 对 应 私有 数 
据 。 第 2 代 则 在 框架 内 部 添加 了 一 个 Data 类 ， 它 的 
实例 有 一 个 cache 属 性 ， 私 有 数据 与 用 户 数据 分 别 由 
一 个 Data 实 例 来 维护 ， 这 融 达 成 第 3 和 第 4 个 目标 。 








function Data() { 
this.cache = {}; 


J 


Data.uid = 1; 


Data.prototype = { 
locker: function(owner) { 


var ovalueOf, 

//owner 为 元 素 节 点 、 文 档 对 象 、window 对 象 

// 由 于 浏览 器 的 差异 性 ， 首 先 我 们 检测 一 下 它们 value0f 方 法 有 没有 被 重 写 
// 我 们 通过 觉得 此 3 类 对 象 的 构造 器 进行 原型 重 写 的 成 本 过 大 ， 只 能 对 每 一 



































个 实例 的 value0f 方 法 进行 重 写 


// 检 测 方 式 为 传 入 Data 类 ， 如 果 是 返回 "object" 说 明 没 有 被 重 写 ， 返 回 " 





string" 则 是 被 重 写 





// 这 个 字符 串 就 是 我 们 上 面 所 说 的 UuUID， 用 于 在 缓存 仓库 上 开辟 缓存 体 
unlock = owner .value0f(Data); 
// 这 里 的 重 写 使 用 了 0bject.defineProperty 方 法 ， 因 为 在 这 个 版 本 j 














Query 不 打算 往 下 兼容 IE6~IE8 





//0bject.defineProperty 的 第 3 个 参数 为 对 象 ， 如 果 不 显示 设置 enume 


rable、 writable、 configurable, 











// 则 会 默认 为 false。 这 也 正如 我 们 所 期 竺 的 那样 ， 我 们 不 再 希望 人 们 来 所 














历 它 ， 重 写 它 ， 再 次 动 它 的 配置 


set: 


// 这 个 过 程 被 jQuery 称 之 为 开锁 ， 通 过 valueof 这 扇 大 门 ， 进 入 到 仓库 
if(typeof unlock !== "string") { 

unlock = jQuery.expando + Data.uid++; 

ovalueOf = owner.valueOf; 


Object.defineProperty(owner, "valueOf", { 
value: function(pick) { 
if(pick === Data) { 
return unlock; 


} 


return ovalueof.apply(owner); 


}); 


} 

// 接 下 来 就 是 开辟 绥 存 体 

if(!this.cache[unlock]) { 
this.cache[unlock] = {}; 


} 


return unlock; 


function(owner, data, value) { 
// 写 方法 
var prop, cache, unlock; 

// 得 到 UUID 与 缓存 体 

unlock = this.locker (owner); 
cache = this.cache[unlock]; 











// 如 果 传 入 3 个 参数 ， 第 2 个 为 字符 串 ， 那 么 直接 在 缓存 体 上 添加 新 的 键 值 对 
if(typeof data === "string") { 
cache[data] = value; 
// 如 果 传 入 2 个 参数 ， 第 2 个 为 对 象 
} else { 
//WREAME CIA SER, IBA BRU, AEA For 
in 循环 添加 新 键 值 对 
if(jQuery.isEmptyObject(cache)) { 
cache = data; 
} else { 
for(prop in data) { 
cache[prop] = data[prop]; 











} 
} 


this.cache[unlock] = cache; 


return this; 








ty 
get: function(owner, key) { 
// 读 方法 
var cache = this.cache[this.locker(owner)]; 
// 如 果 只 有 一 个 参数 ， 则 返回 整个 绥 存 体 
return key === undefined ? cache : cache[key]; 
ty 


access: function(owner, key, value) { 
// 决 定 是 读 方 法 或 是 写 方法 ， 然 后 做 相应 操作 
if (key === undefined || 
((key && typeof key === "string") && value === 














undefined)) { 
return this.get(owner, key); 


} 
this.set(owner, key, value); 
return value !== undefined ? value : key; 


ty 


remove: function(owner, key) { 
// 略 ， 与 第 1 代 差 不 多 
ty 
hasData: function(owner) { // 判 定 此 对 象 是 否 缓存 了 数据 
return !jQuery.isEmptyObject(this.cache[this. locker (own 





er)]); 


ty 
discard: function(owner) { // 删 除 它 的 用 户 数 据 与 私有 数据 
delete this.cache[this.locker(owner)]; 








} 


}; 


var data_user, data_priv; 


function data_discard(owner) { 
data_user.discard(owner ); 
data_priv.discard(owner ); 


} 
data_user = new Data(); 
data_priv = new Data(); 





接 下 来 就 简 蛙 了 ， 雄 露 给 用 户 调 用 的 方法 都 只 
Fe P50, FARES 20 24 data_user. date_privix FY 





个 实例 对 象 处 理 ， 并 且 私 有 数据 的 处 理 再 也 不 通过 
用 户 数据 的 渠道 了 。 





jQuery.extend({ 
// UUID 


expando: "jQuery" + ( core_version + Math.random() ).replac 
e( /\D/g, "" ), 








NS 








// 用 于 向 前 兼容 
acceptData: function() { 
return true; 








ty 
hasData: function( elem ) {// 判 定 是 否 缓存 了 数据 
return data_user.hasData( elem ) || data_priv.hasData( 
elem ); 


了 


data: function( elem, name, data ) {// 读 写 用 户 数据 
return data_user.access( elem, name, data ); 


ty 


removeData: function( elem, name ) {// 删 除 用 户 数据 
return data_user.remove( elem, name ); 


ty 
_data: function( elem, name, data ) {// 读 写 私 有 数据 
return data_priv.access( elem, name, data ); 


ty 


_removeData: function( elem, name ) {f// 删 除 私 有 数据 
return data_priv.remove( elem, name ); 











HS valueOfix fe NWA. AUC Ay SE ai 28 
对 象 都 有 valueOf 方 法 ， 然 后 通过 闭 包 保存 用 于 关联 
缓存 仓库 的 UUID。 但 闭 包 也 意味 着 特 吃 内 存 ， 这 
是 此 系统 的 最 大 缺憾 。 


7.3 jQuery 的 第 3 代 绥 存 系 统 


jQuery 第 3 代 是 基于 Object.defineProperty， 并 且 
为 了 兼容 jQuery 1.9， 只 改动 Data 对 象 ， 外 部 API 一 


A 


律 不 动 ， 如 表 7-1 所 示 。 


表 7-1 


| see m | winner | aa | meas | vrs 
Ie Re ee 
fe 








function Data() { 


this.expando = jQuery.expando + Data.uid++; 





} 
Data.uid = 1; 
Data.prototype = { 
cache: function( owner ) { 
// 从 目标 对 象 〈 可 能 是 元 素 节 点 、window、document ) 
// 访 问 一 个 特殊 的 属性 ， 判 定 其 否 为 一 个 对 象 
var value = owner[ this.expando ]; 
if ( !value ) { 
value = {} 
// 目标 只 能 是 上 面 提 到 的 3 种 对 象 才 进 入 此 分 文 
if ( acceptData( owner ) ) { 



































// 如 果 是 节点 类 型 (为 了 兼并 IE) 





if ( owner.nodeType ) { 
owner[ this.expando ] = value; 

} else { 
// 在 window 上 创建 一 个 不 可 遍历 的 对 和 象 属性 
Object.defineProperty( owner, this.expando, 





—= 











{ 
value: value, 
configurable: true 
}) 
} 
} 
} 
return value; 
ty 
set: function( owner, data, value ) { 
var prop, 
cache = this.cache( owner ); 
// 如 果 是 3 个 参数 的 情况 
if ( typeof data === "string" ) { 
cache[ jQuery.camelCase( data ) ] = value; 
} else { 
// 如 果 是 2 个 参数 
for ( prop in data ) { 
cache[ jQuery.camelCase( prop ) ] = data[ prop 
] ; 
} 
} 
return cache; 
ty 
get: function( owner, key ) { 
// 与 第 2 代 相 仿 
ty 
access: function( owner, key, value ) { 
// 与 第 2 代 相 仿 
ty 
remove: function( owner, key ) { 
// 与 第 2 代 相 仿 
ty 
hasData: function( owner ) { 
var cache = owner[ this.expando ]; 
return cache !== undefined && !jQuery.isEmptyObject( ca 
che ); 


} 
}; 


po 


jQuery 为 了 照顾 老 旧 版 本 ， 之 前 承 诡 的 
WeakMap 方 案 一 直 没 有 上 架 ， 不 能 不 说 是 遗憾 。 如 
果 直 接 上 WeakMap，jQuery 的 数据 缓存 系统 可 就 精 


OUEZ 








7.4 有 容量 限制 的 缓存 系统 


上 面 提 到 的 jQuery 数据 缓存 系统 是 纯粹 为 DOM 
服务 的 ， 当 我 们 的 框架 出 现 分 层 架 构 ， 束 需要 另 一 
种 绥 存 系统 了 。 因 为 页 面 上 的 市 点 数量 总 在 可 控 范 
围 ， 所 以 不 会 有 将 缓存 系 统 撑 死 的 情况 。 但 如 果 要 
保持 的 是 普通 JavaScript 对 象 ， 束 不 一 定 了 。 如 果 这 
个 是 前 后 通 吃 的 框架 ， 并 且 它 的 缓存 系统 要 为 上 百 
万 用 户 服 务 时 ， 束 更 需要 加 限制 。 











一 个 简单 的 市 容量 限制 的 缓存 系统 可 以 短 成 这 
样 。 





//https://github.com/jquery/sizzle/blob/master/src/sizzle.js 
function createCache(size) { 
var keys = [] 
function cache( key, value ) { 
// #EFFIE6~IESHtoString#llvaluedf ye, 
// 及 cache 本 身 的 name、length 属 性 
if ( keys.push( key +" " ) > size) { 
delete cache[ keys.shift() ]; 








return (cache[ key + " " ] = value); 


return cache; 


var cache = createCache(100) 
cache( "aaa", "bbb" ) 





此 缓存 体 完 全 相信 和 是 jQuery 的 哈 希 寻 找 算 法 实 
现 的 ， 当 一 个 绥 仓 体 的 键 值 对 数量 非 党 庞大， 要命 
中 一 个 键 名 束 可 能 很 花 时 间 。 于 是 我 们 需要 求助 
Least Recently User, Least Recently User2. Two 





Queues. Adaptive Replacement Cache 等 绥 存 算法 。 








其 实 从 实用 性 与 行 数 来 考虑 ， 上 面 这 些 算 法 ， 
了 台数 LRU 最 受 青 睐 。 下 面 给 出 avalon 的 现役 缓存 系 
统 ， 其 核心 是 一 个 链表 与 hashmap 。 








// https://github.com/rsms/js-lLru 
function LRU(maxLength) { 
this.size = 0 
this.limit = maxLength 
this.head = this.tail = void 0 
this. _keymap = {} 


var p = LRU.prototype 


p.put = function (key, value) { 
var entry = {// 创 建 一 个 结 点 
key: key, 
value: value 








this. _keymap[key] = entry 

if (this.tail) {// 调 整 链表 
this.tail.newer = entry 
entry.older = this.tail 

} else { 
this.head = entry 

} 

this.tail = entry 

if (this.size === this.limit) { 
this.shift() 

} else { 
this.sizet++ 


J 


return value 


} 


p.shift = function () { 
var entry = this.head 
if (entry) { 
this.head = this.head.newer 
this.head.older = 
entry.newer = 
entry.older = 
this._keymap[entry.key] = void 0 
delete this. _keymap[entry.key ] 
} 
} 
p.get = function (key) { 
var entry = this._keymap[key ] 


if (entry === void 0) 
return 

if (entry === this.tail) { 
return entry.value 

} 

// HEAD-------------- TAIL 

If <.older .Newer> 

// <--- add direction -- 


// A B C <D> E 
if (entry.newer) { 
if (entry === this.head) { 
this.head = entry.newer 


} 


entry.newer.older = entry.older // C <-- E. 


if (entry.older) { 


entry.older.newer = entry.newer // C. --> E 
} 
entry.newer = void © // D --x 
entry.older = this.tail // D. --> E 
if (this.tail) { 
this.tail.newer = entry // E. <-- D 
} 
this.tail = entry 
return entry.value 


} 


module.exports = LRU 


var a = new Cache(100) 
a.put("aaa", "bbb" ) 
console. log(a.get("aaa") ) 





75 ”本 地 存储 系统 





上 耐 提 人 到 的 缓存 系统 部 是 基于 内 存 的 ， 当 页 面 
跳 转 时 就 什么 都 没有 了 。 因 此 我 们 需要 将 数据 序列 
化 到 本 地 ， 方 便 下 次 打开 时 再 使 用 。 传 统 方式 是 使 


用 cookie， 但 cookie 问 题 很 多 。 





(1) cookie 数 量 和 长 度 的 限制 。 每 个 domain 最 
多 只 能 有 20 条 cookie， 每 个 cookie 长 度 有 4096 字 节 
的 限制 。 尽 管 在 当今 新 的 浏览 器 和 客户 端 设 备 版 本 
中 ， 文 持 8192 字 节 的 Cookie 大 小 已 剑 发 销 见 。 





(2) 用 户 能 配置 为 禁用 cookie。 


(3) cookie 每 次 随 HTTP 事 务 一 起 发 送 ， 占 用 


总 


Si 


TH 


(4) 潜在 的 安全 风险 。cookie 可 能 会 被 算 改 ， 
用 户 可 能 会 操纵 其 计算 机 上 的 cookie， 这 意味 着 会 


对 安全 性 造成 潜在 风险 或 者 导致 依赖 于 cookie 的 应 
用 程序 失败 。 另 外 ， 虽 然 cookie 只 能 被 发 送 到 客户 
问 的 域 访问 ， 但 是 历史 上 的 黑客 已 经 发 现 从 用 户 计 
算 机 上 的 其 他 域 访问 cookie 的 方法 。 您 可 以 手动 加 
密 或 解密 cookie， 但 这 需要 额外 的 编码 ， 并 且 加 密 
解密 需要 耗费 一 定 的 时 间 进 而 影响 应 用 程序 的 性 


b 
Ko 





法 


amp | 


为 弥补 cookie 缺 陷 ， 浏 览 絮 厂商 叉 推 出 了 其 他 
方案 ， 如 图 7-3 所 示 。 


。3QLite 


。 无 限制 





图 7-3 


userData 是 下 的 东西 ，“ 垃 圾 *。 现 在 用 的 最 多 


的 是 Flash 吧 ， 衬 间 是 Cookie 的 25 倍 ， 基 本 够 用 。 再 
之 后 Google 推 出 了 Gears， 虽 然 没 有 限制 ， 但 不 碍 的 
HEA hae SEAR Ah NTE CRA ATI) 。 到 了 
HTML5 把 这 些 都 统一 了 了， 官方 建议 是 每 个 网 站 
SMB, JER AS, BEE, E y. kiyi 
异 的 是 ， 居 然 所 有 文 持 的 浏览 器 目前 都 采用 的 
5MB， 尽 管 有 一 些 浏览 器 可 以 让 用 尸 设置 ， 但 对 于 
网 页 制作 者 来 说 ， 目 前 的 形势 就 5MB 来 考虑 是 比较 
妥当 的 ， 如 图 7-4 所 示 。 
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IE Firefox Opera Chrome Safari iPhone Android 
8.0+ | 3.0+ | 10.5+ | 4.0+ | 4.0+ | 20+ | 2.0+ 


























图 7-4 


IE 在 8.0 的 时 候 束 支持 了 ， 非 常 出 人 意料 。 不 过 
需要 注意 的 是 ，IE、Firefox 测 试 的 时 候 需 要 把 文件 
上 传 到 服务 器 上 (或 者 localhost) ， 直 接点 开本 地 


的 HTML 文 件 ， 是 不 行 的 。 


localStorage 的 缺点 。 





(1) localStorage 大 小 限制 在 500 万 字符 左右 ， 
各 个 浏览 器 不 一 致 。 


(2) localStorage 在 隐私 模式 下 不 可 读 取 。 


(3) localStorage 本 质 是 在 读 写 文件 ， 数 据 多 
的 话 会 比较 慢 (Firefox 会 一 次 性 将 数据 导入 内 存 ， 
想 想 融和 党 得 吓人 ) 。 





(4) localStorage 不 能 被 爬虫 朴 取 ， 不 要 用 它 
完全 取代 URL 传 参 ， 瑕 不 掩 瑜 。 


以 上 问题 佛 可 人 避免， 所 以 我 们 的 关注 点 应 该 放 
在 如 何 使 用 localStorage。 


localStorage 的 API: 


function getLocalStorage() { 
// 现 在 的 一 些 浏 览 器 有 一 种 功能 叫 无 痕 浏 览 ， 
// 此 模式 1ocalStorage 会 被 禁用 了 ,但 对 象 还 在 ,此 调用 其 方法 时 会 抛 异 
if (window.localStorage) { 
try { 
localStorage.setItem("key", "value"); 
localStorage.removelItem("key"); 
return localStorage 
} catch (e) { 
} 














} 

} 

var db = getLocalStorage() 

if (db) { 
db.setItem('author', 'jasonling' ) 
db.setItem('company', 'Tencent' ) 
db.setItem('introduction', 'A code lover !') 
alert(localStorage[ 'author']) 
alert(db.getItem( 'company' ) ) 
// 删 除 
db ,removeItem( 'company ) 
alert(db.getItem( 'company' ) ) 
// 当 然 也 可 以 用 db .setItem('company'， ' ) ;来 删除 一 个 值 ， 但 这 样 删 不 彻 





/7 清除 
db.clear() 
alert(localStorage['author']) //undefined 





下 面 我 们 讲解 一 下 store.js 这 个 库 。 它 是 一 个 兼 
容 所 有 浏览 器 的 localStorage 适 配器 ， 不 需要 借助 
cookie 或 者 Flash。store.js 会 根据 浏览 器 目 动 选择 使 
用 localStorage 或 者 userData 来 实现 本 地 存储 功能 如 
表 7-2 所 示 。 


表 7-2 














‘od i | ee 


"use strict" 





module.exports = (function() { 


// Store.js 
var store = {}, 
win = (typeof window != 'undefined' ? window : global), 
doc = win.document, 
localStorageName = 'localStorage', 
scriptTag = 'script', 
storage 


store.disabled = false 

store.version = '1.3.20' 

// 定 义 接口 〈 空 实现 ， 即 便 浏 览 器 不 文 持 userData 与 10calStorage 也 不 会 报 
错 ) 











store.set = function(key, value) {} 

store.get = function(key, defaultVal) {} 

store.has = function(key) { return store.get(key) !== undef 
ined } 


store.remove = function(key) {} 
store.clear = function() {} 
store.transact = function(key, defaultVal, transactionFn) { 
if (transactionFn == null) { 
transactionFn = defaultVal 
defaultVal = null 


} 
if (defaultVal 
defaultVal 


} 
var val = store.get(key, defaultVal) 


transactionFn(val) 
store.set(key, val) 


} 
store.getAll = function() { 


var ret = {} 

store.forEach(function(key, val) { 
ret[key] = val 

}) 


return ret 


store.forEach = function() {} 

// 内 部 方法 

store.serialize = function(value) { 
return JSON.stringify(value) 








} 
// 内 部 方法 
store.deserialize = function(value) { 

if (typeof value != 'string') { return undefined } 

try { return JSON.parse(value) } 

catch(e) { return value || undefined } 


} 


// 判定 1ocalSstorage 是 否 可 用 ， 包 括 禁用 的 情况 
function isLocalStorageNameSupported() { 
try { return (localStorageName in win && win[localStora 





g 
eName]) } 
catch(err) { return false } 


} 
// 使 用 localStorage 实 现 本 库 
if (isLocalStorageNameSupported()) { 
storage = win[localStorageName ] 
// 添 加 (如 果 存 在 同名 数据 会 履 盖 ) 
store.set = function(key, val) { 
if (val === undefined) { return store.remove(key) } 
storage.setItem(key, store.serialize(val) ) 
return val 





} 

// 获 取 ， 可 以 设置 备用 值 

store.get = function(key, defaultVal) { 
var val = store.deserialize(storage.getItem(key) ) 
return (val === undefined ? defaultVal : val) 


} 
// 移 除 
store.remove = function(key) { storage.removeItem(key) 


// 清 空 
store.clear = function() { storage.clear() } 


// 遍 历 





store.forEach = function(callback) { 
for (var 1=0; i<storage.length; i++) { 
var key = storage.key(i) 
callback(key, store.get(key) ) 


} 


} 
// 如 果 浏 览 器 支持 addBehavior， 说 明 也 支持 userData 
} else if (doc && doc.documentElement.addBehavior) { 
var storageOwner, 
storageContainer 
/VuserData 的 宿主 对 象 为 一 个 元 素 节 点 ， 
// 使 用 userData 后 ，IE 会 重 写 该 节点 的 getAttribute 方 法 ， 只 支持 一 个 














参数 

// 而 getAttribute 在 IE6~IE8 要 获取 A 标签 的 完整 路 径 ， 需 要 用 到 其 第 2 
个 参 交 
SBA 


//http://www.cnblogs.com/_franky/archive/2010/10/25/186 
0649. html 

// 为 了 不 影响 现 有 节点 ， 我 们 可 以 用 ActiveXobject(htmlLfile) 

// 创 建 一 个 看 不 见 的 HTML 文 档 ， 在 里 面 创建 一 个 div。 














/VuserData 还 要 指定 路 径 ， 这 时 我 们 使 用 /favicon .ico 这 个 神奇 的 地 
址 ， 即 便 返 回 404 也 不 会 产生 危害 
// (see: http://msdn.microsoft.com/en-us/library/aa7525 
74(v=VS.85).aspx) 
try { 
storageContainer = new ActivexObject('htmlfile' ) 
storageContainer .open( ) 
storageContainer .write('<'+scriptTag+'>document .w=w 
indow</'+scriptTag+'> 
<iframe src="/favicon.ico"></iframe>' ) 
storageContainer.close() 
storageOwner = storageContainer.w.frames[0].documen 








t 
storage = storageOwner.createElement('div' ) 
} catch(e) { 
storage = doc.createElement('div' ) 
storageOwner = doc.body 
var withIEStorage = function(storeFunction) { 
return function() { 
var args = Array.prototype.slice.call(argument 
s, 0) 


args.unshift(storage) 
// See <a>http://msdn.microsoft.com/en-us/libr 


ary/m</a> 
$531081(v=VS.85).aspx 
// and <a>http://msdn.microsoft.com/en-us/libr 
ary/m</a> 
$531424(v=VS.85).aspx 
storageOwner .appendChild(storage) 
storage.addBehavior('#default#userData' ) 
storage. load(localStorageName ) 
var result = storeFunction.apply(store, args) 
storageOwner .removeChild(storage) 
return result 


i 
// IE7 对 键 名 有 特殊 要 求 ， 我 们 需要 转译 一 下 


// See https://github.com/marcuswestin/store.js/issues/ 














40 

// See https://github.com/marcuswestin/store.js/issues/ 
83 

var forbiddenCharsRegex = new RegExp("[ !\"#$%&'()*+,/\\ 
\Ni 7 <=>?@[N\\]4° {1 }-]", "9") 

var ieKeyFix = function(key) { 

return key.replace(/d/, '__$&').replace(forbidden 

CharsRegex, '__') 


} 

// 设 置 

store.set = withIEStorage(function(storage, key, val) { 
key = 1eKeyFix(key) 
if (val === undefined) { return store.remove(key) } 
storage.setAttribute(key, store.serialize(val) ) 
storage. save(localStorageName ) 
return val 

}) 

// 添 加 

store.get = withIEStorage(function(storage, key, defaul 

tVal) { 
key = ieKeyFix(key) 
var val = store.deserialize(storage.getAttribute(ke 
y)) 

return (val === undefined ? defaultVal : val) 

}) 

// 移 除 

store.remove = withIEStorage(function(storage, key) { 
key = ieKeyFix(key) 
storage.removeAttribute(key) 


storage.save(localStorageName ) 


store.clear = withIEStorage(function(storage) { 
var attributes = storage.XMLDocument .documentElemen 
t.attributes 
storage. load(localStorageName ) 
for (var i=attributes.length-1; i>=0; i--) { 
storage.removeAttribute(attributes[i].name) 


} 


storage.save(localStorageName ) 


}) 
store.forEach = withIEStorage(function(storage, callbac 
k) { 
var attributes = storage.XMLDocument .documentElemen 
t.attributes 
for (var i=0, attr; attr=attributes[i]; ++i) { 
callback(attr.name, store.deserialize(storage.g 


e 
tAttribute(attr.name) ) ) 
} 
}) 
} 
try { 
var testKey = '__storejs__' 
store.set(testKey, testKey) 
if (store.get(testKey) != testKey) { store.disabled = t 
rue } 
store. remove(testKey ) 
} catch(e) { 
store.disabled = true 
} 
store.enabled = !store.disabled 
return store 
}()) 





隐私 模式 下 可 以 采用 window.name 模 拟 


localStorage 的 方式 处 理 ， 因 为 window.name 在 载 入 
新 页 面 或 刷新 后 ， 其 值 依然 是 上 次 页 面 设 置 的 值 
。 相 关 资 料 : 


https://github.com/kbjr/Box.js 
https://www.baidufe.com/item/af0bb5872f2a1ef337ce.html 





本 章节 讲解 了 两 种 存储 系统 ， 基 于 内 存 的 与 基 
于 本 地 储存 的 ， 它 们 间 可 以 相互 转换 相互 文 撑 ， 是 
我 们 构建 Web APP 的 基石 。 


Bi PETER 





样式 模块 大 致 分 为 两 大 块 ， 精 确 获 取样 式 值 与 
设置 样式 、 精 确 是 用 于 修饰 获取 的 。 由 于 样式 分 为 





外 部 样式 、 内 部 样式 与 行内 样式 ， 再 加 个 important 
对 选择 器 权重 的 和 干扰， 我 们 实际 很 难看 到 元 系 是 应 
用 了 哪些 样式 规则 。 因 此 样式 模块 ，80% 的 比重 在 
于 获取 这 一 块 ， 像 offset、 滚 动 条 也 归 入 这 一 块 。 





大 体 上 ， 我 们 在 标准 浏览 左下 是 使 用 
getComputedStyle， 耻 6 一 下 8 下 使 用 currentStyle 来 获 
取 元 素 的 精确 样式 。 不 过 getComputedStyle 并 不 挂 
在 元 素 上 ， 而 是 window 的 一 个 API， 它 返回 一 个 对 
象 ， 可 以 选择 使 用 getPropertyValue 方 法 传 入 连 字 符 
风格 的 样式 名 取得 其 值 ， 或 者 属性 法 + 驼峰 风格 的 
样式 名 去 取 值 ， 但 考虑 到 currentStyle 也 是 使 用 属性 
VAIER RUS, Be tt EH a o 








var getStyle = function(el, name) { 
if (el.style) { 
name = name.replace(/\-(\w)/g, function(all, letter) { 


return letter.toUpperCase(); 


}); 
if (window.getComputedStyle) { 
//getCcomputedSty1le 的 第 二 个 伪 类 是 用 于 对 付 伪 类 的 ， 如 滚动 条 ， 
placeholder, 
// 但 IE9 不 支持 ， 因 此 我 们 只 管 元 素 节 点 ， 上 面 的 el .style 过 滤 掉 
return el.ownerDocument.getComputedStyle(el, null)[ 

















name | 


} else { 
return el.currentStyle[ name ]; 





设置 样式 则 更 没 难度 ， 直 接 el.style[ name ] = 


valued XE o 
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C1) 样式 名 要 同时 支持 连 字 符 风格 (CSS 的 
标准 风格 ) 与 驼峰 风格 (DOM 的 标准 风格 ) 。 


(2) 样式 名 要 进行 必要 的 处 理 ， 如 float 样 式 
与 CSS3 带 私有 前 绥 的 样式 〈 易 用 性 的 考虑 ) 。 


(3) 设置 样式 时 ， 对 于 长 度 宽度 可 以 考 夸 直 
接 处 理 数 值 ， 由 框 染 智 能 补 上 "px" 单 位 〈 易 用 性 的 
FE) 。 





(4) 对 个 别 样式 的 特殊 处 理 ， 如 下 下 的 z- 
index, opacity. user-select. background-position, 
top. left (扩展 性 的 考虑 ， 这 里 要 引入 插件 机 制 或 
适 配 妖 机 制 〉。 


本 章 将 围 经 avalon 的 css 模 块 展开 ， 涵 盖 的 内 容 
大 致 相当 于 jQuery 的 css、offset、demensions 模 块 ， 
或 相当 于 EXT4 的 Element.style、Element.scroll、 
Element.position 模 块 。 


8.1 主体 架构 


avalon 处 理 样 式 相 关 的 方法 如 图 8-1 所 示 。 





图 8-1 


那些 位 于 avalon. 甸 中 的 为 原型 方法 ， 暴 露 给 一 
般 用 户 使 用 。 其 中 avalon.fn.css 是 最 重要 的 方法 ， 但 
avalon.fn.css 只 是 一 个 空 帝 ， 它 实现 的 是 avalon.css 


HET, ARETE A i o 





avalon.fn.css = function (name, value) { 
if (avalon.isPlainObject(name)) { 


// 如 果 是 传 入 一 个 对 象 ， 那 么 进入 批量 set 操 作 


for (var i in name) { 
avalon.css(this, i, name[i]) 


} 
} else { 

var ret = avalon.css(this, name, value) 
J 
return ret !== void 0 ? ret : this 








avalon.css 会 对 参数 进一步 分 解 ， 首 先 对 属性 名 
(通过 avalon.cssName) 进行 转换 ， 然 后 根据 参数 
的 类 型 与 个 数 ， 进 入 3 个 分 文 处 理 ， 如 图 8-2 所 示 。 





avalon.css = function (node, name, value) { 





// 读 写 删除 元 素 节 点 的 样式 
if (node instanceof avalon) { 
node = node[0]// 取得 元 素 节点 


} 

var prop = avalon.camelize(name), fn 

name = avalon.cssName(prop) || prop 

// 获 取样 式 (value 为 布尔 表示 去 掉 单 位 , 返回 纯 数值 ) 

if (value === void 0 || typeof value === 'boolean') { 
fn = cssHooks[prop + ':get'] || cssHooks['@:get' | 
if (name === 'background') { 

name = 'backgroundColor ' 


} 


var val = fn(node, name) 
return value === true ? parseFloat(val) || 0 : val 
} else if (value === '') { /7/ 清 除 样式 
node.style[name] = '' 
} else { // 设 置 样式 
if (value == null || value !== value) { 
return 








if (isFinite(value) && !avalon.cssNumber[prop]) { 
value += 'px'// 添 加 单位 


fn = cssHooks[prop + ':set'] || cssHooks['@:set' ] 
fn(node, name, value) 





FA Tf H 2 avalon.cssName & avalon.cssHooks; 
一 个 是 样式 名 转换 函数 ， 另 一 个 是 适配器 对 象 ， 用 








于 还 加 各 种 样式 的 设置 或 获取 钩子 方法 。 目 前 没有 
一 个 浏览 器 〈 包 括 Chrome ) 在 没有 钩子 方法 的 情况 
下 ， 能 顺 列 操作 所 有 样式 。 





avalon.cssHooks 有 两 个 默认 通用 方法 ， 即 
cssHooks['(@:get']、cssHooks['@:set']。 为 实现 它 
们 ， 在 下 下 部 要 大 费 周 草 ， 因 为 在 旧式 中 ， 有 3 
个 地 方 可 以 存放 样式 值 ， 需 要 区 佑 利用 它 才 能 得 到 





O a 


中 


样式 的 精确 值 ， 而 现代 浏览 左下 ， 
getComputedStyle 方 法 就 行 了 。 





name, value) { 


cssHooks['@:set'] = function 
try { 
//node.style.width 
//node.style.width 
node.style[name] = 
} catch (e) { 


} 


} 
if (window.getComputedStyle) { 
cssHooks['@:get'] = function (node, name) { 
if (!node || !node.style) { 
throw new Error('getComputedStyle 要 求 传 入 一 个 节点 ' + 


(node, 


NaN;node.style.width = 
undefine 在 旧式 IE 下 会 执 异 
value 


"XXXXXXX ; 
AY 
N 











node) 

} 
var ret, styles 

if (styles) { 
ret name === 'filter' ? styles.getPropertyValue(n 
: styles[name] 
if (ret 
ret 


getComputedStyle(node, null) 


ame ) 


node.style[name] // 其 他 浏览 器 需要 我 们 手动 取 内 





联 样式 





} 
} 


return ret 


} 

} else { 
var 
var 
var 
var 
var 
var 


rnumnonpx = /A-?(?:\d*\. )?\d+(?! px) [A\d\s]+$/i 
rposition = /A(top|right|bottom|left)$/ 

ralpha = /alpha\([4)]*\)/i 

ie8 ! !window. XDomainRequest 

salpha 'DXImageTransform.Microsoft.Alpha' 
border = { 


thin: 1e8 ? '1px' 


medium: ie8 ? '3px' 


thick: ie8 ? '5px' 


cssHooks['@:get' | 
// 取 得 精确 值 ， 不 




















'2px', 
'4px', 
'6px' 


= function (node, name) { 
过 它 有 可 能 是 带 em、pc、mm、pt、% 等 单位 


var currentStyle = node.currentStyle 
var ret = currentStyle[name | 
if ((rnumnonpx.test(ret) && !rposition.test(ret))) { 
//Q， 保 存 原 有 的 style.1left, runtimeStyle.left, 
var style = node.style, 
left = style.left, 
rsLeft = node.runtimeStyle.left 
//Q@HFOMRMstyle.left = xxx 会 影响 到 currentStyle.1left 























// 因 此 把 它 currentStyle.left 放 到 runtimeStyle.1left， 

//runtimeStyle.left 拥 有 最 高 优先 级 ， 不 会 style . Left 影响 

node.runtimeStyle.left = currentStyle.left 

//@ 将 精确 值 赋 给 到 style.1Left， 然 后 通过 IE 的 另 一 个 私有 属性 s 
tyle.pixelLeft 

// 得 到 单位 为 px 的 结果 ; fontSize 的 分 支 见 http://bugs.jquery 
.com/ticket/760 

style.left = name === 'fontSize' ? '1lem' : (ret || 





























9 ) 


ret = style.pixelLeft + 'px' 

// 由 还 原 style.left, runtimeStyle.left 
style.left = left 
node.runtimeStyle.left = rsLeft 





if (ret === 'medium') { 
name = name.replace('Width', 'Style') 
//border width 默认 值 为 nedium， 即 使 其 为 0， 





if (currentStyle[name] === 'none') { 
ret = 'Opx' 
} 
} 
return ret === '' ? 'auto' : border[ret] || ret 





8.2 样式 名 的 修正 


不 是 所 有 样式 名 都 是 直接 用 正则 简单 处 理 一 下 
束 行 ， 这 里 存在 3 个 陷阱 ，float 对 应 的 JavaScript 属 
性 存在 兼容 性 问题 、CSS3 大 灯 炸 时 带 来 的 私有 前 绿 
以 及 IE 的 私有 前 级 不 合流 问题 。 





float 是 一 个 关键 字 ， 因 此 不 能 直接 用 ，IE 这 边 
给 的 蔡 换 品 是 styleFloat，W3C 是 cssFloat。 


CSS3 给 Web 开 发 禹 来 了 革命 性 的 有 影响， 以 前 很 
多 需要 JavaScript 才 能 实现 的 复杂 效果 ， 现 在 使 用 
CSS3 就 能 简单 实现 。 但 ， 标 准 制定 总 是 滞后 于 浏览 
器 厂商 的 实现 ， 只 要 有 一 个 浏览 器 实现 一 个 很 酷 的 
效果 ， 其 他 浏览 器 也 跟风 。 浏 览 器 厂商 也 有 先 见 之 
明 ， 不 确定 自己 的 实现 与 W3C 最 后 定案 的 效果 是 否 
一 致 ， 于 是 私有 前 级 便 产 生 了 。 不 过 私有 前 级 是 由 
来 以 久 的 东西 ， 并 不 是 CSS3 在 这 概念 被 炒 热 时 才 出 











来 的 ， 比 如 -ms- 是 8 时代 束 存在 、-khtml- 束 更 早 





了 。 现 在 私有 前 级 在 各 浏览 器 定义 如 表 8-1 所 示 。 





一 ee foie fo fate 


20134E4E 4], Googledtwebkith % ABE, W 
定 目 己 单干 ， 取 名 为 blink， 并 在 Chrome28 起 使 用 此 
内 核 。 不 过 为 了 减轻 用 户 负 担 ， 还 是 使 用 -webkit- 
做 前 级 。 目 前 ， 使 用 -webkit- 前 级 的 有 Opera、 
Safari、Chrome 三 家 。 





上 述 的 这 些 前缀 加 上 样式 名 再 驼峰 化 殉 是 真正 
可 用 的 样式 名 对 那些 试验 性 样式 来 说 ) 了 ， 比 
如 -ms-transform -> MsTransform、-webkit-transform 
-> WebkitTransform、-o-transform -> Otransform, - 


moz-transform -> MozTransform。 但 试验 性 样式 述 





ASIAN, ENE AIR Ee, keun 
FF17 束 直接 可 用 transform。 但 光 是 这 样 是 不 够 的 ， 
还 有 第 3 个 问题 ，IE 下 -ms-transform 对 应 的 
JavaScript 属 性 名 为 msTransform， 因 此 这 个 正则 整 
非常 复 某 。 我 们 要 动用 一 个 函数 通过 特性 侦 测 手段 
获取 它 。 在 avalon， 它 叫 cssName， 在 jQuery 叫做 
vendorPropName。 由 于 特性 侦 测 是 DOM 操 作 ， 消 
耗 很 大 ， 因 此 获取 后 吏 应 缓存 起 来 ， 避 免 重复 检 
测 ， 这 个 对 象 在 avalon 称 之 为 cssMap。 下 面 是 对 应 
的 源 但 。 














var camelize = avalon.camelize 


var root = document.documentElement 
var prefixes = ['', '-webkit-', '-o-', '-moz-', '-ms-'] 
var cssMap = { 

'float': window.Range ? 'cssFloat' : 'styleFloat' 
} 
avalon.cssName = function (name, host, camelCase) { 

if (cssMap[name]) { 

return cssMap[name ] 


} 
host = host || root.style || {} 
for (var i = 0, n = prefixes.length; i < n; i++) { 
camelCase = camelize(prefixes[i] + name) 
if (camelCase in host) { 
return (cssMap[name] = camelCase) 


J 


return null 


| 

prefixes 的 顺序 设置 得 相当 有 技巧 。”” 表 示 没 
有 私有 前 级 ， 此 样式 已 经 标准 化 ， 故 排 在 最 前 面 。 
wekbit 是 最 多 浏览 器 使 用 的 ， 因 此 排 第 >。“-o0-” 是 最 
小 众 的 ， 因 此 排 末 尾 。 其 他 两 个 夹 中 间 。 








我 们 通过 上 面 的 函数 ， 只 需 传 入 一 个 参数 ， 就 
可 以 得 到 真正 可 用 的 样式 名 了 。 





8.3 个别 样式 的 特殊 处 理 





现在 我 们 来 展示 cssHooks 的 价值 所 在 。 它 是 专 
门 用 于 对 付 那 些 有 兼容 性 问题 、 不 按 篆 规 出 牌 的 奇 
葬 样 式 。cssHooks 为 一 个 普通 的 对 象 ， 它 每 个 属性 
名 都 以 xxx+":set" 或 xxx+":get" 命 名 ， 值 为 处 理 函 
数 。 
8.3.1 opacity 

在 开始 之 前 ， 我 们 先 了 解 一 下 CSS 是 怎么 进行 
的 吧 ， 毕 葛 JavaScript 设 置 透 明 度 只 是 把 这 过 程 由 和 死 


态 变 成 动态 。Firefox 和 webkit 系 浏览 器 的 古老 版 本 
的 透明 度 设置 如 下 。 





.opacity{ 
-moz-opacity: 0.5; 
-khtml-opacity: .5; 


} 








有 资料 表明 Firefox 在 0.9 版 本 中 声明 废弃 此 样 
式 ， 反 正 笔 者 在 Firefox3.6.24 与 Firefox16 中 测试 ，- 
moz-opacity: 已 经 没有 效果 了 了。 现在 标准 浏览 右 的 透 
明度 设置 “包括 IE9) 如下。 





.opacity { 
Opacity: ,5 


} 





opacity EIH ER RSA AEH, WREN 
不 透明 ， 束 要 用 rgba 与 hsla 。 不 过 它们 是 一 种 样 
式 值 的 格式 ， 并 不 是 样式 ， 不 列 入 我 们 的 讨论 范 
围 。 


旧版 本 下 的 透明 上 度 设置 ， 依 赖 于 私有 的 滤 
镜 DXImageTransform.Microsoft.Alpha 。 


.Opacity { 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40) 


} 








不 过 这 个 太 长 了 ， 正 又 提供 了 一 个 简短 的 ， 也 
是 现在 主流 的 在 正 设置 透 明度 的 方式 。 


.Opacity { 
filter: alpha(opacity=40) 


} 





在 IE8， 开 始 推 广 -ms- 私 有 前 经， 透明 小 镜 的 
写法 变 成 如 下 。 


.opacity { 

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacit 
y=40)"; 
/*IE8 专 用 ， 必 须 用 引号 括 起 */ 





对 于 IE6 和 IE7 还 需要 注意 一 点 : 为 了 使 得 透明 
设置 生效 ， 元 系 必 须 是 “有 布局 ”。 一 个 元 素 可 以 通 
过 使 用 一 些 CSS 属 性 来 使 其 被 布局 ， 有 如 width 和 
position。 关 于 微软 专 有 的 hasLayout 属 性 详情 ， 以 
及 如 何 触发 它 ， 大 家 可 以 网 上 搜索 一 下 。 








了 解 这 些 ， 我 们 在 框架 中 实现 它们 束 很 简单 
了 。 由 于 opacity 已 经 被 标准 浏览 器 所 支持 ， 我 们 的 
HUM YS EIA A ANIE'# 





先 实现 获取 透明 度 ， 下 是 使 用 滤 镜 实现 透明 
的 ， 不 同 的 正版 本 其 滤 镜 的 定义 方式 也 不 同 ， 但 相 
同 点 也 很 好 找 ， 束 是 透明 值 总 是 跟 在 opactity= 之 
后 。 因 此 我 们 写 一 个 正则 将 它们 截取 出 来 ， 然 后 转 
换 为 数字 除 以 100。 如 采 此 元 系 没 有 使 用 透明 波 
To HRE" 好 了 。 


























//cssHooks 的 多 子 函数 方法 详 见 第 1 节 ， 依 次 传 入 元 素 节 点 ， 样 式 名 ， 样 式 值 
var ropactiy = /(opacity|\d(\d|\.)*)/g 
cssHooks['opacity:get'] = function (node) { 
var match = node.style.filter.match(ropactiy) || [] 
var ret = false 
for (var i = 0, el; el = match[it++];) { 
if (el === 'opacity') { 
ret = true 
} else if (ret) { 
return (el / 100) + '' 








} 








} 
return '1' // 确 保 返 回 的 是 字符 串 
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一 1 的 数值 ， 我 们 应 用 于 滤 镜 需要 放大 100 倍 。 在 
IE6、IE7 中 ， 我 们 需要 判定 元 每 有 没有 hasLayout 
, BIA, 1 Hzoom =1 让 其 hasLayout。 在 IE7、 
IE8 中 ， 如 果 透 明度 为 100， 会 让 文本 模糊 不 清 ， 需 
要 清 掉 透明 滤 镜 ， 这 时 我 们 就 过 到 一 个 问题 了 ， 一 
个 元 系 上 可 能 设置 了 多 个 滤 锐 ， 不 能 简单 
用 el.style.filter = "" 清 掉 ， 这 要 用 正则 把 单个 
滤 镜 分 割 出 来 ， 把 当中 的 透明 滤 镜 去 掉 。 如 果 滤 镜 
在 0 一 99， 我 们 设置 透明 度 有 个 罕 门 ， 如 果 已 经 存 
在 透明 涛 镜 ， 直 接 找到 其 波 镜 对 象 ， 改 其 alpha 值 束 
行 了 ， 奋 则 就 需要 小 心 蛋 咽 拼 字符 串 啦 ! 











var ralpha = /alpha\([^)]*\)/i 
cssHooks['opacity:set'] = function (node, name, value) { 
var style = node.style 
var Opacity = isFinite(value) && value <= 1 ? 'alpha(op 


ac 

ity=' + value * 100 + ')' : ! 

var filter = style.filter || ''; 

style.zoom = 1 

// 不 能 使 用 以 下 方式 设置 透明 度 

//node.filters.alpha.opacity = value * 100 

style.filter = (ralpha.test(filter) ? 
filter.replace(ralpha, opacity) : 
filter + ' ' + opacity).trim() 


if (!style.filter) { 
style.removeAttribute('filter' ) 





8.3.2 user-select 


CSS3 有 一 个 叫 user-select 的 样式 ， 用 于 控制 文 
a 比如 ， ia I 
选中 的 状况 ， 分 散 用 户 的 注意 力 ， 这 里 束 可 以 答 试 
使 用 此 属性 。 在 标准 浏览 器 下 ， $.cssName 的 
人 存在， 一 下 子 就 找到 可 使 用 的 样式 名 。 而 在 旧版 本 
IE “ ， 没 有 这 样 的 样式 ， 是 使 用 unselectable 属 性 代 

。 不 过 由 于 unselectable 不 具 继 承 性 ， 加 之 子 元 素 
a FTAWEH, Alta RE AINA EA 
行 的 ， 要 把 它 及 其 所 有 子孙 都 设置 ， 有 具体 代码 如 














cssHooks[ "userSelect:set" ] = function(node, name, value) { 
var allow = /none/.test(value) ? "on" : "", 
e, i = 0, els = node.getElementsByTagName('*'); 


node.setAttribute('unselectable', allow); 
while ((e = els[ i++ ])) { 
switch (e.tagName.toLowerCase()) { 


case 'iframe' : 
case 'textarea' : 
case 'input' : 
case 'select' : 
break; 
default : 
e.setAttribute('unselectable', allow); 





8.3.3 background-position 


在 旧版 本 正中 ，IE 只 支持 backgroundPositionX 
与 backgroundPositionY， 不 支持 background 
Position， 而 在 FF 早期 的 版 本 中 “(3.0 之 前 〉，FF 只 
支持 backgroundPosition， 不 支持 
backgroundPositionX 与 backgroundPositionY。 它 们 
俩 总 是 对 着 干 的。 不 过 ，FF 加 入 了 Chrome 引 发 的 
WAS ESE, FFB OAR AAS, RITER 
好 IE6、IE7 就 行 了 。 实 现 很 简单 ， 分 别 取 
backgroundPositionX 与 backgroundPositionY， 然 后 
把 它们 合 在 一 起 束 是 backgroundPosition。 


cssHooks[ "backgroundPosition:get" ] = function( node, name, va 
lue ) { 

var style = node.currentStyle; 

return style.backgroundPositionx +" "+style.backgroundP 


ositionx 





8.3.4 z-index 


z-index 并 不 是 一 个 难以 理解 的 属性 ， 但 它 却 
错误 的 假设 而 使 很 多 初级 的 开 肥 人 员 陷 入 混乱 。 混 
乱 发 生 的 原因 是 z-index 只 能 工作 在 被 明确 定义 了 
absolute、fixed 或 relative 这 3 个 定位 属性 的 元 素 中 ， 
它 会 让 元 系 沿 z 轴 进行 排序 (z 轴 的 起 点 为 其 父 节 后 
所 在 的 层 ， 终 点 为 屏幕 ) 。 如 果 为 正 数 ， 则 离 用 户 
更 近 ， 为 负数 则 表示 离 用 户 更 远 。 想 象 这 样 一 个 场 
合 ， 一 个 相对 定位 的 父 市 把， 然后 里 面 有 NN 个 绝对 
定位 的 子 元 素 。 如 采 没 有 指定 z-index， 它 们 的 显示 
方式 是 按照 出 现 的 先后 顺序 排列 
(nextElementSibling 会 在 previousElementSibling 之 
上 ) ; 如 果 有 束 按 z-index 排列 ， 如 果 是 负数 ， 标 准 
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stacking context 概 众 、IE 下 有 的 select 元 每 的 bug、z- 
index 为 负 时 的 浏览 占 差 寞 等 ， 如 图 8-3 所 示 。 








层 登 的 元 素 


/ 


图 8-3 


z-index Five. tooltip, tT FARR. FAH 
与 拖 动 等 中 经 和 常 被 使 用 。 为 了 让 目标 控件 排 在 最 前 


面 ， 我 们 需要 得 知 它 们 的 z-index， 然 后 有 目的 地 改 
Z-index 或 重 排 元 素 〈 将 目标 元 素 移 出 DOM 树 再 插 
入 父 元 素 内 部 的 最 后 一 个 元 系 之 后 ) o 








想 获取 z-index， 这 里 得 应 对 一 个 特殊 情况 ， 目 
标 元 素 没 有 被 定位 ， 需 要 往 上 回溯 其 祖先 定位 元 
系 。 如 条 找到 ， 束 返回 定位 祖先 的 z-index 值 。 如 果 
最 后 都 没 找到 ， 束 返回 0。 














cssHooks["zIndex:get"] = function(node) { 
while (node.nodeType !== 9) { 
// 即 使 元 素 定 位 了 ， 但 如 果 zindex 设 置 为 "aaa" 这 样 的 无 效 值 ， 浏 览 器 都 会 
auto 
// 如 果 没 有 指定 zindex 值 ，IE 会 返回 数字 09， 其 他 返回 auto 
var position = getter(node, "position") || "static"; 
if (position !== "static") { 
// <div style="z-index: -10;"><div style="z-index: 
0; "></div></div> 
var value = parseInt(getter(node, "zIndex"), 10); 
if (!isNaN(value) && value !== 0) { 
return value; 




















} 
} 
node = node.parentNode; 
} 
return 0; 


}; 





8.3.5 “盒子 模型 





在 开始 讲 元 到 的 尺寸 位 置 时 ， 我 们 先 了 解 一 下 
CSS 盒 子 模 型 ， 如 果 没 有 这 知识 储备 ， 后 面 束 进行 
不 下 去 。 我 们 可 以 把 页 面 上 每 一 个 元 系 闻 掺 看 成 一 
个 装 了 东西 的 合子， 盒子 里 面 的 内 容 到 例子 边框 之 
间 的 距离 即 填充 (padding) ， 盒 子 本 身 有 边框 
(border) ， 用 来 放置 子 元 系 或 文本 的 区 域 叫 
content， 盒 子 边 框 与 其 他 例子 之 间 还 存在 边界 
(margin) ， 为 了 把 盒子 痛 饰 得 五 彩 缤纷 ， 而 不 只 
是 一 个 死板 的 矩形 ， 它 还 有 背景 闫 色 与 背景 图 片 。 
为 了 方便 泻 染 ， 它 们 都 会 于 不 同 的 层 上 ， 如 图 8-4 
所 示 。 























CSS 2.0 盒 模型 层次 3D 示 意图 





border 


| background-image 
background-color 透明 元 素 


margin 


图 8-4 


上 面 显示 了 各 属性 在 z 轴 的 层次 关系 : 边界 -> 
背景 磊 色 -> 背景 图 片 -> 边框 -> 填 序 -> 内 容 区 。 


从 3D 模 型 中 ， 我 们 还 可 以 得 出 以 下 结论 。 





C1) BRAE, Fras A EZ A xe 
设置 空 日 的 。 

(2) 背景 图 片 在 背景 闫 色 之 上 ， 也 就 是 说 背 
REA H UA mA RE. 





(3) MAA seta Hy zécontent#ll padding X E . 


在 CSS3 中 ， 它 引进 了 border-shodaw， 能 把 元 
Atlas SUR, PDAS OR. WR 
TTA Ahi Ninset, MACHEN, FB 
则 为 外 阴影 。 此 外 CSS 2.1 还 有 一 个 虚线 框 
outline。 那 么 盒子 模型 的 立体 层次 束 变 成 : 边界 -> 
虚线 框 -> 外 阴影 -> 背景 闫 色 -> 背 景 图 片 -> 内 阴影 -> 
影 边 框 -> 填充 -> 内 容 区 ， 如 图 8-5 所 示 。 








图 8-5 


在 FF15 下 ， 从 元 素 的 3D 图 ， 可 以 直接 看 到 它 
们 之 间 的 层 登 关系 。 





不 过 真正 影响 布局 的 还 是 那儿 个 ，margin、 
border、padding、content。 在 早期 ， 存 在 两 种 盒子 
模型 ， 它 决定 着 width、height 的 计算 公式 。W3C 的 
盒子 模型 ， 亦 即 后 来 的 content-box， 内 容 区 的 宽 即 
为 el.style.width; 正在 怪异 模式 的 盒子 模型 ， 亦 即 
后 来 的 border-box， 内 容 区 的 宽 是 未 知 的 ， 要 用 
width- 左 右边 框 宽 - 左 右 填 空 宽 。 这 了 吏 导 致 了 下 的 盒子 
总 比 W3C 的 smat。 从 设计 与 计算 的 角度 ， 尤 其 是 百 
分 比 设 置 宽 高 ， 正 的 盒子 模型 更 为 合理 ， 人 符合 人 们 
的 常识 。 因 此 W3C 后 来 搞 了 个 box-sizing 的 CSS3 狐 
属性 来 握 罕 人 们 的 疑问 。box-sizing 在 W3C 规 范 
中 ， 拥 有 3 种 值 ，content-box、padding-box、border- 
box， 客 局 的 计算 起 点 由 它们 的 名 字 决 定 。 











8.3.6 ”元 系 的 尺寸 


由 于 元 系 的 高 与 宽 的 取 法 都 是 一 样 的 ， 笔 者 这 
里 只 拿 宽 来 讲解 。 参 照 jQuery 的 行为 ，width 是 指 内 
容 区 的 宽 。 一 般 情 况 下 ， 我 们 可 以 使 用 
getComputedStyleta MECRA E, (AOR 
的 display 为 none， 或 元 素 的 祖先 的 dispaly 为 none， 
叉 或 者 元 系 脱 离 了 DOM 树 ，getComputedStyle 束 无 
能 为 力 了 。 旧 版 本 下 那 边 也 差不多 。 并 有 晶 浏 览 器 在 
非 content-box 模 式 F, el.currentSyle.width=\, 
getComputedStyle(el, null).width 得 到 的 值 是 整个 盒 
子 的 宽 ， 不 是 内 容 区 的 宽 《FF 好 像 是 例外 )〉 ， 因 此 
我 们 需要 另辟蹊径 。 




















HORER EAN HOR WOR TGR E Bet 
的 ， 它 的 offsetWidth 为 0， 但 这 不 能 作为 判定 元 又 是 
隐 沁 的 充分 条 件 ， 因 为 用 户 可 能 直接 设置 width: 
Opx» XEF, RAIRA E E displayi iN 


NONE o 





function showHidden(node, array) { 
//http://www.cnblogs.com/rubylouvre/archive/2012/10/27/2742 
529, html 
if (node.offsetwidth <= 0) { //opera.offsetwidth 可 能 小 于 0 
if (rdisplayswap.test(cssHooks['@:get'](node, 'display' 
))) x 
var obj = { 
node: node 
} 
for (var name in cssShow) { 
obj[name] = node.style[name | 
node.style[name] = cssShow[name ] 


} 
array.push(obj) 


var parent = node.parentNode 
if (parent && parent.nodeType === 1) { 
showHidden(parent, array) 








接 下 来 ， 我 们 还 要 判定 元 素 的 盒子 模型 。IE 在 
怪异 模式 下 ， 人 金子 模式 为 border-box， 如 果 不 支 持 
box-sizing， 那 么 大 家 都 是 content-box， 人 否则 根据 
box-sizing ÆA kE. BEIT ANE? 裁 筋 正 市 来 的 
好 东西 offsetWidth， 现 在 它 已 被 标准 浏览 右 展 好文 
持 ， 并 列 入 规范 。 





我 们 先 做 一 个 实验 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>contentbox by 司徒 正美 </title> 
<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 
<style type="text/css"> 
body, html{ 
height :100%; 
background: gray; 


} 
#parent { 


background: red; 

width:300px; 

height:300px; 

border:1px solid greenyellow; 


J 


#son{ 
width:100px; 
height :100px; 
background-color :blue; 
padding: 20px; 
margin:15px; 
overflow:hidden; 
border:5px solid yellow; 
} 
</style> 
<script> 
window.onload = function() { 
var el = document.getElementById("son"); 
console.log(el.offsetwidth) ; 
console. log(window.getComputedStyle(el, null).w 
idth); 
} 
</script> 
</head> 
<body> 
<div id="parent"> 
<div id="son"> </div> 
</div> 
</body> 
</html> 








我 们 可 以 在 firebug 中 看 到 son 元 素 的 盒子 模型 
的 具体 参数 与 结构 ， 如 图 8-6 所 示 。 








图 8-6 





我 们 也 可 以 在 IE8+ 的 开发 人 员工 具 中 看 到 类 似 
的 信息 ， 如 图 8-7 所 示 。 
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Padding 20px 
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坐标 : (549, 335) Z-index=auto 


图 8-7 


控制 台 输出 为 150px，100px， 我 们 可 以 从 出 推 


offsetWidth = borderWidth + paddingWidth + 
width 


如 果 我 们 在 div#son 的 样式 添加 多 一 行 样式 规 
My: 


box-Sizing:border-box; 
-moz--Sizing: border -box; 





这 时 ， 红 色 方 块 就 会 比 刚才 的 显示 得 小 很 多 
(Firefox 在 15 版 中 依然 显示 错误 ) 。 控 制 台 输出 
(100px, 100px) Firefox15 为 《100px,， 
50px) ) ， 如 图 8-8 所 示 。 








offsetWidth = borderWidth + paddingWidth + 
width， 这 公式 依然 有 效 。 


在 笔者 写本 节 时 ， 只 有 Firefox 文 持 padding- 
box。 修 改 上 面 的 实验 代码 ， 在 firebug 中 看 到 控制 
台 输 出 为 110px，60px， 如 图 8-9 所 示 。 


因此 取 元 系 内 容 的 宽 使 用 上 面 公 式 最 合算 不 
过 ， 完 全 不 受 例子 模型 影响 。 在 jQuery 的 








dimensions 模 块 中 ， 叉 提供 两 个 只 读 方 法 
innerWidth、outerWidth 用 于 取得 padding-box、 
border-box 与 margin-box 的 宽 。 不 过 ， 依 赖 
outerWidth 进 行 加 减 ， 一 点 难度 也 没有 。 





图 8-8 


不 过 设置 元 素 内 容 区 的 宽 就 及 烦 了 ， 在 非 
content-box 中 ， 它 完全 是 一 个 间接 值 ， 一 个 不 存在 
的 属性 。 如 果 是 padding-box， 我 们 要 将 用 户 传 入 值 
加 上 padddingWidth;， 如 果 是 border-box， 再 在 刚才 
的 基础 上 加 上 borderWidth。 最 后 ， 在 我 们 日 党 工作 
中 ， 还 有 两 个 尺寸 非常 重要 一 一 窗口 的 大 小 与 页 面 
的 大 小 ， 它 们 都 是 只 读 。 为 了 方便 起 匈 ， 我 们 都 把 
它们 交 由 本 模块 处 理 。 











图 8-9 





先 看 窗口 的 宽 。 以 前 网 景 浏览 器 束 提 供 了 一 个 
好 用 的 只 读 属 性 innerWidth， 标 准 浏览 器 一 脉 相 
承 ， 都 有 这 东西 ， 正 9 也 支持 它 ，W3C 草 稿 已 在 
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新 版 本 的 标准 浏览 希 ， 只 用 它 取 窗 口 宽 。 旧 版 本 
IE， 我 们 可 以 要 区 分 一 下 它 是 耕 处 于 怪异 模式 。 











怪异 模式 实质 上 就 是 IE6 之 前 的 模式 。 除 了 盒 
子 模型 的 计算 范围 不 一 样 外 ， 另 一 个 重要 区 别 在 于 
body 标 签 的 解释 。 在 远古 时 代 ，body 元 系 是 最 项 层 
的 可 视 元 素 ， 而 HTML 元 素 保持 隐藏 。 然 后 ， 现 代 
浏览 器 认为 body 只 是 一 个 普通 的 块 状元 素 ，HTML 
则 是 包含 整个 浏览 器 窗口 的 可 视 元 素 。 








IE 又 发 明 一 套 叫 clientXXX 的 属性 ， 用 于 取得 
元 素 的 可 视 区 的 尺寸 ， 它 是 不 包含 深 动 条 以 及 被 隐 
藏 的 部 分 。 因 此 窗口 的 宽 可 以 这 样 取 : 





windowwidth = window.innerWidth || document.documentElement.cli 
entwidth || document. body.clientWidth 





不 过 ， 实 际 上 jQuery 与 avalon 等 框架 都 不 打算 
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子 模 型 ， 不 像 box-sizing 那 样 可 以 对 单个 元 系 进 行 设 
置 。 因 此 ， 上 面 的 代码 可 以 人 简化 成 这 样 : 


windowwidth = document.documentElement.clientWidth 


如 果 你 的 框架 是 手机 框架 ， 可 以 放胆 去 用 
innerWidth, 即 : 


windowwidth = window.innerwidth 


再 看 页 面 的 宽 ， 即 文档 的 宽 。 一 旦 出 现 横 回 滚 
动 条 ， 我 们 驶 要 考虑 加 上 被 隐 蕊 的 部 分 。 标 准 浏览 
髓 义 有 一 套 叫 outerXXX 的 属性 ， 但 那 是 取 浏 览 器 的 
尺寸 的 ， 因 此 不 能 像 innerWidth 那 样 照样 画 硝 户 。 

IE 在 此 义 羔 切 地 为 我 们 奉 上 为 两 套 吊 scrollXXX、 
offsetXXX 的 属性 ， 标 准 浏览 右 继 续 照 抄 不 误 ， 但 
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IE, Operai\ NoffsetWidth = clientWidth + 滚动 
条 + 边框 。 





NS、FF 认 为 offsetWidth 是 网 页 内 容 实际 宽度 ， 
可 以 小 于 clientWidth 。 


scrollWidth 





IE、Opera 认 为 scrollWidth 是 网 页 内 容 实际 宽 
度 ， 可 以 小 于 clientWidth。 


NS、FEF 认 为 scrollWidth 是 网 页 内 容 宽度 ， 不 过 
最 小 值 是 clientWidth 。 





你 想 想 世界 上 有 这 么 浏览 攻 ， 谁 知道 它们 又 是 
怎么 想 的 。 因 此 直接 把 这 些 属性 放 在 一 起 ， 取 最 大 
值 吧 。 


var pageWidth = Math.max( document .documentElement.scrollwidth, 


document .documentElement.offsetwidth, document.documentElement. 
clientWidth, 
document.body.scrollwidth, document.body.offsetwidth) ; 





document.body.clientWidth 肯 定 是 最 小 的 ， 不 用 
Fs 


在 Firefox 中 还 提供 了 window.scrollMaxX 这 样 一 
个 属性 ， 它 与 window.innerWidth 相 加 ， 恰 好 等 于 页 
面 的 宽度 。 不 过 MDC 和 警告 说 它们 之 和 不 等 于 页 面 
筑 ， 可 能 是 之 前 版 本 的 问题 吧 。 





在 webkit 系 浏览 器 ， 它 们 直接 在 document 中 添 
加 width/height 属 性 ， 很 方便 。 





var cssShow = { 
position: ‘'absolute', 
visibility: 'hidden', 
display: 'block' 


} 
var rdisplayswap = /^(none|table(?!-c[eal).+)/ 


function showHidden(node, array) { 
A 
} 


avalon.each({ 


Width: "width '， 


Height: 'height' 


}, function (name, method) { 


var clientProp = 'client' + name, 
scrollProp = 'scroll' + name, 
offsetProp = 'offset' + name 
cssHooks[method + ':get'] = function (node, which, override 
) i 
var boxSizing = -4 
if (typeof override === 'number') { 
boxSizing = override 
} 
which = name === 'Width' ? ['Left', 'Right'] : ['Top', 
"Bottom' ] 


var ret = node[offsetProp] // border-box 0 
if (boxSizing === 2) { // margin-box 2 
return ret + avalon.css(node, 'margin' + which[0], 


true) + avalon.css(node, 


1 + 


‘margin’ + which[1], true) 


} 
if (boxSizing < 0) { // padding-box -2 
ret = ret - avalon.css(node, 'border' + which[0] + 


Width', true) - avalon.css(node, 'border' + which[1 
'Width', true) 


if (boxSizing === -4) { // content-box -4 
ret = ret - avalon.css(node, 'padding' + which[0], 


rue) - avalon.css(node, 'padding' + which[1], true) 


} 


return ret 


cssHooks[method + '&get'] = function (node) { 
var hidden = []; 
showHidden(node, hidden); 
var val = cssHooks[method + ':get'](node) 
for (var i = 0, obj; obj = hidden[i++]; ) { 
node = obj.node 
for (var n in obj) { 
if (typeof obj[n] === 'string') { 
node.style[n] = obj[n] 
} 


return val 


avalon.fn[method] = function (value) { // 会 忽视 其 display 
var node = this[0] 
if (arguments.length === 0) { 
if (node.setTimeout) { // 取 得 窗口 尺寸 
return node['inner' + name] | | 
node.document .documentElement[clientPro 
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node . document .body[clientProp] 
//IE6 下 前 两 个 分 别 为 undefined,0 
} 
if (node.nodeType === 9) { // 取 得 页 面 尺寸 
var doc = node.documentElement 
//FF chrome html.scrollHeight< body.scrollHe 
ight 
//TE 标准 模式 : html.scrollHeight> body.scrollHei 
ght 
//TE 怪异 模式 : html.scrollHeight 最 大 等 于 可 视窗 口 多 
一 点 ? 
return Math.max(node.body[scrollProp], doc[scro 
1l 


1Prop], node.body[offsetProp], doc[offsetProp], 
doc[clientProp] ) 


return cssHooks[method + '&get'](node) 
} else { 
return this.css(method, value) 


} 


avalon.fn['inner' + name] = function () { 
return cssHooks[method + ':get'](this[0], void 0, -2) 


avalon.fn['outer' + name] = function (includeMargin) { 
return cssHooks[method + ':get'](this[0], void ©, inclu 


eMargin === true ? 2 : 0) 





8.3.7 ”元 系 的 显 隐 


想 让 元 系 在 页 面 上 看 不 见 有 许多 办 法 ， 但 我 这 
里 只 讲 display。display 为 none 时 ， 它 不 占有 物理 空 
则 ， 附 近 的 元 素 就 可 以 顺势 回 它 的 位 置 挪 过 去 ， 比 
如 手 风 蕉 效果 ， 下 拉 效 末 都 依赖 于 它 。 因 此 这 种 隐 
藏 方式 非常 有 用 。 在 许多 情况 下 ， 它 是 没有 什么 好 
说 的 ， 显 示 融 设置 block， 隐 藏 就 是 none， 切 换 吏 是 
根据 它 原来 的 状态 决定 显 隐 。 














但 不 是 所 有 元 素 直 接 用 block 束 能 搞定 ， 像 
thead、tbody、tr 等 上 共有 特定 默认 display 值 的 元 系 ， 
它们 一 旦 设置 了 block， 表 格 束 会 面目 全 非 。 














<!DOCTYPE HTML> 
<html> 


<head> 
<title>display by 司徒 正美 </title> 
<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 
<style type="text/css"> 
body, html{ 
height :100%; 
background: gray; 
} 
#parent { 
background: red; 


width: 300px; 
height : 300px; 


} 
#son{ 
width:100px; 
height :100px; 
background: blue; 
padding: 20px; 
margin:15px; 
display:none; 
border:5px solid yellow; 
} 
</style> 
<script> 


window.onload = function(){ 
var el = document.getElementById("son") 
el.style.display= "" 


</script> 

</head> 

<body> 
<div id="parent"> 

<div id="son"> </div> 

</div> 

</body> 

</html> 





我 们 必须 赋 以 正确 的 display 值 才能 让 它 生 效 。 








问题 是 ， 如 何 界 定 这 个 “正确 ”。 单 单 是 块 状元 素 设 
置 block， 内 联 元 素 设置 inline， 让 它们 显示 是 不 行 
的 。 这 还 引进 了 一 个 问题 ， 如 何 区 分 它 是 块 状元 系 
或 内 联 元 素 。 对 于 不 断 增 长 的 HTIML5 元 素 种 类 ， 














hash 法 也 不 可 靠 。 而 且 增长 的 不 单 是 元 素 种 类 ， 还 
有 display 值 的 类 型 。 


在 老 旧 的 CSS 1 规范 中 ，display 值 仪 包括 ; 
block、inline、1list-item、none。 在 CSS 2.1 规 范 中 ， 
它 已 经 扩张 到 如 下 这 么 多 值 : inline、block、list- 
item. run-in, inline-block、table、inline-table、 
table-row-group. table-header-group. table-footer- 
group, table-row. table-column-group, table- 
column, table-cell. table-caption. none. inherit. 
CSS3 引 入 更 强大 的 布局 模型 Flexible Box, Xf 
display 增 加 ruby、ruby-base、ruby-text、ruby-base- 
group、ruby-text-group、flex、grid 等 值 ( 注 ， 新 添 
值 不 太 稳 定 ， 一 切 以 W3C 上 的 最 新 草稿 为 准 ) 。 





不 过 有 些 元 素 ， 我 们 可 以 肯定 它们 的 默认 样式 
值 ， 对 于 一 些 特别 的 元 素 就 需要 实时 去 取 了 。 为 了 
取得 干净 的 默认 display 属 性 ， 我 们 需要 在 iframe 沙 





箱 中 去 取 。 


var none = 'none' 
function parseDisplay(elem, val) { 
// 用 于 取得 此 类 标签 的 默认 display 值 
var doc = elem.ownerDocument 
var nodeName = elem.nodeName 
var key = '_' + nodeName 
if (!parseDisplay[key]) { 
var temp = doc.body.appendChild(doc.createElement (nodeN 








ame ) ) 
if (avalon.modern) { 
val = getComputedStyle(temp, null).display 
} else { 
val = temp.currentStyle.display 
} 
doc.body.removeChild(temp) 
if (val === none) { 
val = 'block' 


} 
parseDisplay[key] = val 
} 


return parseDisplay[key ] 








FTW Wtoggle TAR EJA E AN Ee 


JER o 





function toggle(node, show){ 
var display = node.style.display, value 
if (show) { 
if (display === none) { 
if (!value) { 
node.style.display = '' 


J 


if (node.style.display === '' && avalon(node).css(' 
display') === none && 
// fix firefox bug, 必 须 挂 到 页 面 上 
avalon.contains(node.ownerDocument, node) ) 


{ 
value = parseDisplay(node) 
} 
} else { 
if (display !== none) { 
value = none 
} 
if (value !== void 0) { 
node.style.display = value 
} 
} 





8.3.8 元素 的 坐标 


元 系 的 坐标 吏 是 指 其 top 与 left 值 。node.style 恰 
首 有 这 两 个 属性 ， 但 它 只 有 人 被 定位 了 才 有 效 ， 盏 则 
即使 在 IE9、FF15、Chrome23、Operal2 等 浏览 器 下 
都 返回 auto。 圣 好 ， 即 使 一 个 元 素 没 有 被 定位 ， 它 
的 offsetTop 、offsetLeft 也 是 有 效 的 ， 它 们 是 相对 于 
offsetParent 的 距离 。 我 们 一 级 级 问 上 累加 ， 就 能 得 
到 相对 页 面 的 坐标 ， 亦 有 人 称 之 为 元 系 的 绝对 华 
标 。 








function offset(node) { 
var left = node.offsetLeft, 
top = node.offsetTop; 
do { 
left += node.offsetLeft; 


top += node.offsetTop; 
} while (node = node.offsetParent ); 


return { 
left: left, 
top: top 

} 





此 外 ， 相 对 于 可 视 区 的 坐标 也 很 实用 ， 比 如 让 
弹出 窗口 居中 对 齐 。 以 前 实现 这 个 计算 量 非常 巨 
大 ， 自 从 正 的 getBoundingClientRect 方 法 被 发 掘 出 
来 后 ， 简 直 是 小 菜 一 碟 。 更 令 人 高 兴 的 是 ， 它 现在 
也 被 标准 浏览 器 普 过 接受 ， 并 列 入 W3C 标 准 ， 无 兼 
容 性 之 忧 。 此 方法 能 获取 页 面 中 采 个 元 素 〈border- 
box) 的 左 、 上 、 右 和 下 分 别 相对 浏览 器 视窗 的 位 
置 。 它 返回 一 个 Object 对 象 ， 访 对象 肯定 有 这 样 4 个 
属性 : top、left、right、bottom， 标 准 浏 览 器 下 可 
能 还 多 出 width、height 这 两 个 属性 。 这 里 的 top、 
left 和 CSS 中 的 理解 很 相似 ，width、height 是 元 素 上 自 
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不 一 样 ，right 是 指 元 素 右边 界 距 窗口 最 左边 的 距 
离 ，bottom 是 指 元 素 下 边界 距 窗 口 最 上 面 的 距离 ， 
如 图 8-10 和 图 8-11 所 示 。 














做 软 的 MSDN Measuring Element Dimension 
and Location with CSSOM in Internet Explorer 9》 给 
出 男 一 个 更 具体 的 图 ， 标 著 更 多 CSSOM 各 种 属 
性 。 示 例 页 面 中 拥有 一 个 相对 定位 的 红色 元 素 。 监 
色 元 素 是 红色 元 到 的 父 节 点 ， 它 是 用 于 演示 各 种 例 
子 ， 如 content-box、padding-box、border-box、 
margin-box 以 及 offsetTop〈( 这 是 属于 蓝 色 元 素 的 ， 
hea Z, trek 70% WoffsetParent) . viewport 
FEN TR EEIE, Ahtmlbn se. ie 70 RIAA RI 
和 条， 方便 我 们 观察 clientTop 与 scrollTop 或 者 
clientHeight 与 scrollHeight 的 差异 。 
getBoundingClientRec 中 的 top 与 bottom 也 在 图 8-12 中 
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图 8-11 


http://msdn.microsoft.com/en-us/library/ms530302%28VS .85%29.aspx 





getBoundingClientRect 的 文 持 情况 如 表 8-2 所 
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表 8-2 








7 = 


Viewport edge 
:一 一 一 Margin box getBoundingClientRect ().top 


+ Border box getBoundingClientRect ().bottom 
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getComputedStyle ().borderTop width 
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getComputedStyle ()-height =< 


(may not resolve to pixels) scrollHeight 


clientHeight 
(does not include scrollbar) 
: r: 
| offsetHeght/ 
getBoundingClientRect ().height 


(the hit test area) 总 


图 8-12 


因此 我 们 也 可 以 很 方便 地 利用 它 求 出 相对 于 页 
面 的 距离 ， 将 它 相 对 于 可 视 区 的 距离 加 上 滚动 距离 
PLT T o 


var rect =this.getBoundingClientRect() 
var top = rect.top+document .documentElement.scrollTop; 
var left = rect.left+document.documentElement.scrollLeft; 











到 目前 为 止 ， 我们 只 是 把 所 有 用 到 的 知识 介绍 
一 衣 ， 束 像 W3C 文 案 那 样 总 是 完美 而 不 实用 ， 我 们 
还 要 考虑 浏览 器 莱 容 性 呢 。 有 了 兼容 性 ， 上 面 简洁 
的 公式 束 要 改 得 非 弟 胱 肿 丑 避 才 可 以 用 。 








那 真正 的 解法 是 如 何 的 呢 ? 首先 ， 我 们 判定 它 
是 否 在 DOM 树 上 ， 不 在 直接 返回 (0, 0). AU 
取得 元 素 在 可 视 区 的 距离 加 上 滚动 距离 然后 减 去 浏 
哆 器 的 边框 。 因 此 ， 计 算 可 视 区 距离 与 滚动 距离 时 
都 已 经 包含 浏览 器 的 边框 。 而 浏览 器 的 边框 即 最 顶 
层 的 可 视 元 素 的 边框 ， 在 标准 模式 下 ， 顶 层 可 视 元 
素 为 html， 怪 异 模式 下 为 body。 计 算 滚 动 距离 也 是 
这 样 ， 需 要 选 好 顶层 可 视 元 素 。 由 于 Windows8 与 
IE10 的 发 布 ， 加 速 了 旧版 本 下 的 淘汰 ， 像 jQuery 与 
avalon 已 经 不 考虑 文 持 怪异 模式 。 各 位 可 以 参考 自 
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avalon.fn.offset = function () { // 取 得 距离 页 面 左 右 角 的 坐标 


var node = this[0], 


box = { 
left: 0, 
top: 0 
if (!node || !node.tagName || !node.ownerDocument) { 


return box 
J 
var doc = node.ownerDocument, 
body = doc.body, 
root = doc.documentElement, 
win = doc.defaultView || doc.parentWindow 
if (!avalon.contains(root, node)) { 
return box 


} 
//http://hkom.blog1.fc2.com/?mode=m&no=750 body 的 偏 移 量 是 不 包 
含 nargin 的 
// 我 们 可 以 通过 getBoundingClientRect 来 获得 元 素 相 对 于 client 的 rect. 
//http://msdn.microsoft.com/en-us/library/ms536433.aspx 
if (node.getBoundingClientRect) { 
box = node.getBoundingClientRect() // BlackBerry 5, iOS 
3 (Original iPhone) 














} 
//chrome/IE6: body.scrollTop, firefox/other: root.scrollTop 
var clientTop = root.clientTop || body.clientTop, 


clientLeft = root.clientLeft || body.clientLeft, 
scrollTop = Math.max(win.pageYyOffset || 0, root.scrollTo 
p, body.scrollTop), 
scrollLeft = Math.max(win.pagexOffset || 0, root.scrol1LL 
eft, body.scrollLeft) 
// 把 滚动 距离 加 到 Jeft, top vs. 
// IE 一 些 版 本 中 会 自动 为 HTML 元 素 加 上 2px 的 border， 我 们 需要 去 掉 它 
// http://msdn.microsoft.com/en-us/library/ms533564(VS.85). 




















aspx 
return { 
top: box.top + scrollTop - clientTop, 
left: box.left + scrollLeft - clientLeft 
} 
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我 们 再 来 取 元 系 相 对 于 其 offsetParent 的 位 置 ， 
亦 有 人 称 之 为 元 又 的 相对 坐标 。 要 取得 此 值 ， 我 们 
先 要 确定 其 offsetParent。 根 据 W3C 给 出 的 规律 ， 元 
素 是 这 样 寻找 其 offsetParent 的 。 如 果 元 素 被 移出 
DOM 树 或 display， 为 none; 作为 HTML 或 BODY 元 
系 ， 或 其 position 的 精确 值 为 fixed 时 ， 返 回 null。 合 
则 分 两 种 情况 ， 当 position 为 absolute、relative 的 元 
素 的 offsetParent 时 ， 它 总 是 为 其 最 近 的 已 定位 的 祖 
先 ， 没 有 找 最 近 的 tt，th 元 素 ， 再 没有 返回 body; 
当 position 为 static 的 元 聚 的 offsetParent 时 ， 则 是 先 找 
最 近 的 tt、th、table 元 系 ， 再 没有 返回 body。 但 现 
实 中 ，Firefox 在 position 为 fixed 返 回 body; 在 下 6 一 
IE8 下 ， 会 增加 一 条 规则 ， 驳 寻找 离 元 素 最 近 的 设 
置 有 能 激活 hasLayout 的 祖先 元 素 。 








假 知 依据 这 个 规律 ， 我 们 在 太 多 情况 下 会 得 到 
offsetParent 为 null， 导 致 无 法 计算 。 我 们 看 jQuery 是 





怎么 做 的 。jQuery 也 有 个 offsetParent 方 法 ， 它 是 将 
选中 元 系 的 所 有 “offsetParent” 收 集 起 来 ， 重 新 包装 
为 jQuery 对 象 返 回 。 而 这 个 “offsetParent” 的 定义 被 
它 修改 了 。 浏 览 器 认为 offsetParent 最 高 只 能 取 到 
body， 而 且 存 在 为 null 的 情况 ，jQuery 则 认为 元 素 
HJoffsetParentH'Jposition 2 Arelative®¥ absolute, 
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html。 另 外 ，jQuery 认 为 position:fixed 的 元 素 也 有 
offsetParent， 束 是 当前 可 视 区 。 














为 了 让 大 家 有 个 直观 的 认识 ， 还 是 建 一 个 
HTML H. 





<!DOCTYPE HTML> 
<html id="html"> 


<head> 
<title>offsetParent by 司徒 正美 </title> 
<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 
<style type="text/css"> 
body, html{ 
height :100%; 
background: orange; 


} 
body{ 
margin: 20px; 


#parent { 
position: relative; 
width: 250px; 
height :250px; 
margin: 20px; 
background: aqua; 
border:20px solid red; 
padding: 20px; 


} 

#son { 
position: absolute; 
width:150px; 
height :150px; 
margin: 20px; 
background: fuchsia; 
border:20px solid blue; 
padding: 2px; 

} 

</style> 
</head> 


<body id="body"> 
<div id="parent"> 
<div id="son"></div> 
</div> 
</body> 
</html> 





从 盒子 模型 的 角度 来 看 ， 相 对 于 offsetParent 的 
距离 ， 是 指 此 元 素 的 margin-box 的 左上 角 到 
offsetParent 的 content-box 的 左上 角 的 距离 。 由 于 
offsetParent. getBoundingClientRect=}: ale HIE S76 
ERRA, AKA TH LA border-box Att JG, 








我 们 需要 减少 offsetParent 的 左边 框 与 元 素 的 左边 界 


的 宽 ， 如 图 8-13 所 示 。 


因此 x 轴 距 离 的 计算 公式 如 下 。 


X = node[clientLeft] - offsetParent[client_left] - 
offsetParent[borderLeftwWidth] - node[marginLeftWidth] 





eee «< im localhost 





图 8-13 


整个 方法 实现 如 下 。 





avalon.fn.position = function () { 
var offsetParent, offset, 
elem = this[0], 
parentOffset = { 
top: 0, 
left: 0 


} 
if (!elem) { 
return parentOffset 


if (this.css('position') === 'fixed') { 
offset = elem.getBoundingClientRect() 
} else { 








offsetParent = this.offsetParent() // 得 到 真正 的 offsetPare 
nt 














offset = this.offset() // 得 到 正确 的 offsetParent 
if (offsetParent[0].tagName !== 'HTML') { 
parentOffset = offsetParent.offset() 





parentOffset.top += avalon.css(offsetParent[0], ‘border 
TopwWidth', true) 

parentOffset.left += avalon.css(offsetParent[0], 'borde 
rLeftwidth', true) 


// Subtract offsetParent scroll positions 
parentOffset.top -= offsetParent.scrollTop() 
parentOffset.left -= offsetParent.scrollLeft() 
} 
return { 
top: offset.top - parentOffset.top - avalon.css(elem, 
marginTop', true), 
left: offset.left - parentOffset.left - avalon.css(elem 
, ‘marginLeft', true) 
} 
} 
avalon.fn.offsetParent = function () { 
var offsetParent = this[0].offsetParent 
while (offsetParent && avalon.css(offsetParent, 'position' ) 
=== 'static') { 
offsetParent = offsetParent.offsetParent; 


i 


return avalon(offsetParent || root) 
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top、left 样 式 值 了 。 我 们 继续 在 cssHooks 对 象 添 加 
钩子 函数 。 


‘top, left'.replace(avalon.rword, function (name) { 
cssHooks[name + ':get'] = function (node) { 
var computed = cssHooks['@:get']|(node, name) 
return /px$/.test(computed) ? computed : 
avalon(node).position()[name] + 'px' 





8.4 元 系 的 滚动 条 的 坐标 


这 是 浏览 右 一 组 非常 重要 的 属性 ， 因 此 光 是 浏 
览 句 本 喘 融 提供 了 多 个 方法 来 修改 它们 ， 比 如 挂 在 
window 下 的 scroll、scrollTo、scrollBy 方 法 以 及 挂 在 
元 素 下 的 scrollLeft、scrollTop、scrollIntoView 方 
法 。jQuery 在 css 模 块 就 提供 了 scrollLeft、scrollTop 
来 修改 或 读 取 元 素 或 窗口 的 滚动 坐标 ， 在 animation 
模块 ， 更 是 允许 它 以 更 平滑 的 方式 来 挪动 它们 。 
an 整 一 个 模块 来 满足 用 户 对 深 动 条 的 各 种 

















修改 tobp、left 来 挪动 元 素 有 一 个 坏处 ， 可 能 遮 

A 某 些 元 素 之 上 ， 而 修改 scrollTop、scrollLeft 不 
这 里 我 们 还 是 仿照 jQuery 那样 ， 把 这 两 个 方法 

a ane scrollTop, 、scrollLeft。 对 于 一 般 的 元 素 节 
点 ， 读 写 它 们 没有 什么 难点 ， 因 为 元 素 上 就 有 这 两 

个 属性 了 。 我 们 只 需 集中 精力 对 付 最 外 和 面 的 深 动 











条 ， 也 称 浏览 器 的 深 动 条 ， 位 于 最 顶层 的 可 视 元 系 
之 上 。 设 置 时 ， 我 们 要 用 到 window 中 的 scrollTo 方 
法 ， 里 面 传 入 你 要 深 到 的 坐标 。 读 取 时 ， 我 们 尝试 
使 用 pageXOffset、pageYOffset 这 组 属性 ， 标 准 浏 览 
峰 从 网 景 时 代 就 文 持 了 ，IE 则 直接 取 html 元 系 的 
scrollLeft, scrollTop 属 性 ， 因 为 笔者 也 不 打算 文 持 怪 
异 模式 。 想 支持 怪异 模式 的 朋友 ， 可 以 继续 尝试 从 
body 元 素 中 取 相 关 属 性 。 











// 生 成 avalon.fn.scrollLeft，avalon.fn.scrollTop 方 法 
avalon.each({ 
scrollLeft: 'pagexoOffset', 
scrollTop: 'pageYOffset' 
}, function (method, prop) { 
avalon.fn[method] = function (val) { 
var node = this[0] || {}, 
win = getWindow(node), 
top = method === 'scrollTop' 
if (!arguments.length) { 
return win ? (prop in win) ? win[prop] : root[metho 
d] : node[method ] 
} else { 
if (win) { 
win.scrollTo(!top ? val : avalon(win).scrollLef 
t(), top ? val : avalon(win). 
scrollTop() ) 
} else { 
node[method] = val 


function getWindow(node) { 
return node.window && node.document ? node : node.nodeType 
=== 9 ? node.defaultView || node.parentWindow : false; 


} 
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象 ) ， 使 得 我 们 的 css 方法 具有 强大 的 扩展 性 ， 进 
而 解决 了 各 种 样 陈 的 该 与 问题 。 








本 章 所 讲 的 属性 在 英文 中 分 别称 之 为 property 
与 attribute。property 是 DOM 对 象 自身 就 拥有 的 属 
性 ， 而 attribute 是 我 们 通过 设置 HIML 标 俭 而 给 之 赋 
予 的 特性 。 笔 者 在 stackoverflow 上 找到 如 下 的 回 
答 ， 或 者 会 更 加 接近 于 真正 的 答案 : 


http://stackoverflow.com/questions/258469/what- 


is-the-difference-between-attribute-and-property These 
words existed way before Computer Science came 


around. 


Attribute is a quality or object that we 
attribute to someone or something . For example, the 


scepter is an attribute of power and statehood. 


Property is a quality that exists without any 
attribution . For example, clay has adhesive qualities; 
or, one of the properties of metals is electrical 
conductivity. Properties demonstrate themselves 
though physical phenomena without the need attribute 
them to someone or something. By the same token, 
saying that someone has masculine attributes is self- 
evident. In effect, you could say that a property is 


owned by someone or something. 


To be fair though, in Computer Science these two 


words, at least for the most part, can be used 
interchangeably - but then again programmers usually 
don't hold degrees in English Literature and do not 


write or care much about grammar books :). 
最 关键 的 两 句 话 。 


(1) attribute CREME) ， 是 我 们 赋予 某 个 事物 
的 特质 或 对 象 。 


(2) property (JRE) ， 是 早已 存在 的 不 需要 
外 界 赋 予 的 特质 。 





但 这 还 是 比较 绕 口 ， 因 此 本 书 通 过 加 点 定语 来 
解决 它们 ， 也 切合 本 章 的 标题 。attribute 就 叫 自 定 
义 属 性 ，property 则 叫 固有 属性 。 


9.1 JOUR APRA BYE 


通 香 我 们 把 对 象 的 非 函数 成 员 叫 做 属性 。 对 于 
元 系 币 点 来 说 ， 其 属性 大 体 分 成 两 大 类 ， 固 有 属性 
BAERE FE) 。 固 有 属性 一 般 遵 循 驼 峰 命 
名 风格 ， 拥 有 默认 值 ， 并 且 无 法 删除 。 自 定义 属性 
是 用 户 随意 添加 的 键 值 对 ， 由 于 元 系 节 点 也 是 一 个 
普通 的 JavaScript 对 象 ， 没 有 什么 严格 的 访问 操作 ， 
因此 命名 风格 林林总总 ， 值 的 类 型 也 乱七八糟 。 但 
是 随意 添加 属性 显然 不 够 安全 ， 比 如 引起 循环 引用 
什么 的 。 因 此 ， 浏 览 右 提供 了 一 组 API 来 供 人 们 操 
作 目 定义 属性 ， 即 setAttribute、getAttribute、 
removeAttribute。 当 然 还 有 其 他 API， 不 过 这 是 标准 
套装 ， 只 有 在 了 6、 正 7 那样 糟 糙 的 环境 下 ， 我 们 才 
求助 于 其 他 API， 一 役 情 况 下 这 3 个 足 疾 。 我 们 通称 
它们 为 DOM 属 性 系统 。DOM 属 性 系统 对 属性 名 会 
进行 小 写 化 处 理 ， 属 性 值 会 统一 转 字 符 串 。 




















var el = document.createElement ("div") 
el.setAttribute("xxx", "1") 
el.setAttribute("Xxx", "2") 
el.setAttribute("XXx", "3") 

console. log(el.getAttribute("xxx") ) 
console. log(el.getAttribute("XxX") ) 





IE6、IE7 会 返回 “1”， 其 他 浏览 器 返回 “3"。 在 
前 问 的 世界 ， 我 们 真是 走 到 哪 都 能 碰 到 兼容 性 问 
题 。 这 只 是 冰山 一 角 ，IE6、IE7 在 处 理 固 有 属性 时 
要 求 进 行 名 字 映 射 ， 比 如 class 变 成 className、for 
变 成 htmlFor。 对 于 布尔 属性 《一 些 只 返回 布尔 的 
属性 ) ， 浏 览 器 间 的 差异 更 大 ， 有 其 体 如 表 9-1 所 
ZN o 





<input type="radio" id="aaa"> 

<input type="radio" checked id="bbb"> 

<input type="radio" checked="checked" id="ccc"> 
<input type="radio" checked="true" id="ddd"> 
<input type="radio" checked="xxx" id="eee"> 


"aaa, bbb, ccc, ddd, eee". replace(/\wt+/g, function( id ){ 
var elem = document.getElementById( id ) 
console. log(elem.getAttribute("checked") ); 


t) 
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寞 性。 但 在 下 6 统治 时 期 ， 这 个 需求 并 不 明显 ， 因 
为 IE6、IE7 个 区 分 固有 属性 与 目 定义 属性 。 
setAttribute 与 getAttribute 在 当时 的 人 看 来 只 是 一 个 
语法 糖 ， 用 el1.setAttribute("innerHTML" "xxxx" 
与 用 el ,innerHTML = "xxx" 效果 一 样 ， 而 且 后 者 更 
方便 。 即 使 早期 应 用 那么 广泛 的 Prototype.js， 提 供 
属性 操作 API 也 非常 贫乏 ， 只 有 identify、 
readAttribute、writeAttribute、hasAttribute、 














classNames, hasClassName, addClassName, 
removeClassName. toggleClassName3$F 7 ix. 
Prototype.js 也 察觉 到 回 有 属性 与 自 定 义 属性 在 DOM 
属性 系统 的 兰 异 ， 在 它 的 内 部 ， 摘 了 
“SElement._attributeTranslations 。 然 而 ， 
Prototype.js 这 个 属性 系统 内 部 还 是 优先 使 用 el[ name 
] 方 式 来 操作 属性 ， 而 不 是 set/getAttribute 〈 接 下 来 
的 章节 ， 笔 者 会 分 析 它 是 如 何 实现 的 ) 。 

















jQuery 早期 的 attr 方 法 ， 其 行为 与 Prototype 一 模 
一 样 。 只 不 过 jQuery1.6 之 前 ， 是 使 用 attr 方 法 同时 
实现 了 读 、 写 、 删 掉 这 3 种 操作 。 从 易 用 性 来 说 ， 

不 区 分 固有 属性 与 目 定 义 属性 ， 由 框架 目 动 内 部 处 
理应 该 比 attr、prop 分 0 BBA FEIT Ale 
迫 jQuery 这 样 做 的 呢 ? 这 是 因为 选择 器 引擎 。 

















jQuery 古 最 早 以 选择 器 为 回 导 的 类 库 。 它 最 开 
始 的 选择 右 引 擎 是 Xpath 式 ， 后 来 换 成 Sizzle， 以 


CSS 表 达 式 风格 来 选取 元 素 。 在 CSS2.1 中 引入 了 属 
性 选择 器 [aaa=bbb]，IE7 也 开始 残缺 支持 。Sizzle 当 
然 训 不 含糊 地 实现 了 这 语法 。 属 性 选择 器 是 最 早 突 
破 类 名 与 ID 的 限制 求 取 元 素 的 。 为 了 显摆 它 的 强 
大 ， 设 计 者 让 它 拥有 多 种 形态 ， 满 足 人 们 各 种 匹配 
需要 。 比 如 ， 它 可 以 只 写 属性 名 [checked]， 那 么 上 
例 中 的 后 四 个 元 素 都 选中 。[checked=true] 选 中 第 四 
个 元 素 ，[checked=xxx] 选 中 第 五 个 元 素 ， 其 中 true 
与 XXX 都 是 用 户 在 标签 的 预 设 值 ， 而 一 字 不 差 地 取 
回 这 个 预 设 值 的 工作 也 只 有 getAttribute 才 能 做 到 。 
根据 标准 ，setAttribute 是 应 该 返回 用 户 设置 的 字符 
串 。 而 el[xxx] 这 样 的 取 法 就 不 一 定 了 ， 比 如 
el.checked 融 返回 布尔 值 ， 表 示 两 种 状态 。 这 种 通过 
状态 取 元 素 的 方式 就 不 归属 性 选择 器 管 了 了 ，CSS3 又 
新 设 了 个 状态 伪 类 满足 人 们 的 需求 。 











此 外 ， 属 性 还 能 以 [name^=value] 
、[name*=value] 、[name$=value] 等 更 精致 的 方 
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的 基础 上 。 因 此 jQuery 下 了 很 大 决心 ， 把 prop 从 attr 
切割 出 来 。 虽 然 为 了 满足 用 户 的 同 前 莱 容 需求 ， 

又 “偷偷 ”地 让 attr 做 了 prop 的 事 ， 但 以 此 为 契机 ， 
jQuery 团队 挖掘 出 更 多 兼容 性 问题 与 相应 解决 方 
宁 。 元 系 内 部 撑 起 整个 属性 系统 的 attributes 类 数组 
属性 也 从 幕后 走 到 前 合 ， 为 世人 上 所 知 。 浏 览 堪 经 过 
这 么 多 年 的 发 展 ， 谁 也 说 不 清 菏 个 元 素 节 氮 拥有 多 
少 个 属性 。for.. 记 循环 也 不 行 ， 因 为 它 对 不 可 遇 历 
的 属性 无 能 为 力 。 在 IE6、IE7 中 ，attributes 会 包含 
上 百 个 特性 节点 ， 不 管 你 是 用 setAttribute 定 义 的 属 
性 ， 还 是 以 el[xxx]=yyy 的 定义 的 属性 ， 还 是 没有 定 
义 的 属性 。 可 惜 到 IE8 与 其 他 浏览 右 中 ， 你 只 看 到 
SLOT A LMR TR, MAEA TE 
(specified attribute) 。 





























显 式 属 性 就 是 被 显 式 设置 的 属性 ， 分 两 种 情 
况 ， 一 种 是 写 在 标签 内 的 HTML 属 性 ， 一 种 是 通过 





setAttribute 动 态 设 置 的 属性 。 这 些 属性 不 分 国有 还 
HEX, RAKES, Mul fEattributes?. Æ 
IE6、IE7 中 ， 我 们 也 可 以 通过 特性 市 点 的 specified 
BEIE CERENA o IESER HAE] 
a, FQ Ale Na A NEARE, PA 
直接 用 hasAttribute API 判 定 。 








var isSpecified = !"1"[0] ? function(el, attr){ 
return el.hasAttribute(attr) 

} : function(el, attr){ 
var val = el.attributes[attr ] 


return !!val && val.specified 


} 





此 外 ，HTML5 对 属性 进行 了 更 多 的 分 类 ， 打 
包 到 不 同 的 对 象 中 去 。dataset 对 象 装 载 着 所 有 以 
data- 开 头 的 目 定 义 属 性 。classList 装 载 着 元 素 的 所 
有 类 名 ， 并 且 提 供 一 套 API 来 操作 它们 。formData 
装载 看 所 有 要 提供 到 后 台 的 数据 ， 以 表单 元 系 的 
name 值 与 value 值 构成 的 不 透明 对 象 。 尽 管 如 此 ， 
还 是 有 大 量 属 性 是 没有 编制 的 ， 它 们 代表 看 元 系 的 
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们 的 值 才 五 花 八 门 ， 如 uniqueNumber、tabIndex、 
colspan、rowspan 为 整数 ，designMode、 
unselectable 、autocomplete 的 值 不 是 on 就 是 off， 
iframe 通 过 frameborder 的 值 〈 是 0 还 是 1) RELA 
显示 边框 ， 通 过 scrolling 的 值 (是 yes 还 是 no) 决定 
是 否 显 示 深 动 条 ， 表 单元 系 的 form 属 性 总 古 指 问 其 
外 围 的 表单 对 象 ， 表 单元 素 的 checked、disabled、 
readOnly 等 属性 总 是 返回 布尔 值 .…… 





面 对 如 此 庞杂 的 属性 ， 主 流 框架 也 纷纷 建 并 了 
对 应 的 模块 来 整治 它 。 在 jQuery 中 有 attributes 模 
块 ，YUI3 是 dom-class、dom-attrs 模 块 ，dojo 是 dom- 
attr、dom-prop、dom-class 模 块 。 从 内 容 来 看 ， 类 
名 都 被 单独 提出 来 处 理 ， 在 jQuery 中 ， 表 单元 系 的 
value 也 被 单独 提出 来 处 理 。Prototype.j$ 虽 然 没 有 划 
分 出 来 ， 但 对 付 一 般 属 性 有 readAttribute 与 
writeAttribute，ID 有 identify， 表 单元 素 的 value 有 








$F， 类 名 更 是 对 应 多 个 方法 ， 这 个 阵营 与 jQuery 的 
属性 模块 一 模 一 样 。 在 1.5 版 之 前 ，Prototype.js 的 属 
性 模块 一 直 是 jQuery 属性 模块 的 蓝本 。 


92 如何 区 分 固有 属性 与 目 定 义 属 性 


在 jQuery、mass Framework 中 ， 提 供 两 组 方法 
来 处 理 它 们 。 但 用 户 首 先 要 知道 他 正在 处 理 的 东西 
是 何 物 。 虽 然 我 们 可 以 在 以 下 链接 玛 到 每 个 元 素 拥 
有 什么 方法 与 属性 ， 但 显然 不 是 每 个 人 都 那么 勤 
Ee 





http://msdn.microsoft.com/library/ms533029%28v=VS . 85%29.aspx 





我 们 需要 做 些 实验 找 出 其 规律 ， 从 这 些 规律 
中 ， 我 们 可 以 找到 区 分 固有 属性 与 自 定义 属性 的 方 


Ho 








<!doctype html> 
<html lang="en"> 
<head> 
<meta Snare = 0 /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 


<tit1le> 如 何 区 7 分 属性 与 特性 by 司徒 正美 </title> 
<script type="text/javascript"> 
var test = function(){ 
var a = document.getElementById("test"); 
a.setAttribute("title", "title"); 





a.setAttribute("title2", "title2"); 
alert(a.parentNode.innerHTML) ; 


</script> 
</head> 
<body> 
<p><strong id="test"> 司 徒 正 美 </strong></p> 
<p><button type="button" onclick="test()"> 点 我 ， 进 行 测试 </butt 
on></p> 
</body> 
</html> 





IE8 下 打印 出 : 


<STRONG id=test title=title title2="title2"> 司 徒 正美 </STRONG> 





Firefox15、Chrome23、IE9 下 打印 出 : 


<strong title2="title2" title="title" id="test"> 司 徒 正美 </strong> 





再 将 a.setAttribute("title", "title"); 


a.setAttribute("title2", "title2") 这 两 行 改 


成 a.title = "title":a.title2 = "title2". 


IE8 下 打印 出 : 


<STRONG id=test title=title title2="title2"> 司 徒 正美 </STRONG> 





Firefox15、Chrome23、IE9 下 打印 出 : 


<strong title2="title2" title="title" id="test"> 司 徒 正 美 </strong> 





经 过 观察 ， 旧 版 本 下 下 固有 属性 ， 如 title、id 

















是 不 带 引 号 的 ， 目 定义 属性 是 禹 引 写 的 ， 但 在 标准 
浏览 器 下 ， 我 们 无 法 区 分 ， 耕 决 此 方案 。 








在 元 素 中 有 一 个 attributes 属 性 ， 里 面 有 许多 特 
性 节点 ， 这 些 特性 市 点 在 于 下 有 一 种 名 为 expando 
的 布尔 属性 ， 可 以 判定 它 是 否 为 目 定 义 属 性 。 但 在 
标准 浏览 左下 没有 此 属性 ， 否 诀 此 方案 。 





function isAttribute(attr, host){ // 仅 有 IE 
var attrs = host.attributes; 
return attrs[attr] && attrs.expando == true 





} 











我 们 再 换 一 个 角度 来 看 ， 如 宋 征 固有 属性 ， 以 
el[xxx] = yyy 的 形式 赋值 ， 再 用 el.getAttribute0) 来 取 
值 ， 痛 定 能 取 到 东西 ， 但 目 定 义 属性 就 不 一 样 。 








var a = document.getElementById("test"); 

a.title = 222 

console.log(a.getAttribute("title") ) FI" 222" 
console.log(typeof a.getAttribute("title")) //"string" 


a.setAttribute("custom", "custom" ) 
console. log(a.custom) //undefined 
console.log(typeof a.custom) //"undefined" 





不 过 要 注意 IE6、IE7 下 的 特例 : 


a.setAttribute("innerHTML", "xxx") 
console.log(a.innerHTML ) //"Xxx" 





即使 如 此 ， 我 们 也 可 以 轻松 经 过 这 个 陷阱 ， 建 
一 个 干 滔 的 同类 型 元 系 作 为 测试 样本 束 行 了 。 








var a = document.createElement ("div") 
console.log(a.getAttribute("title")) 
console. log(a.getAttribute("innerHTML") ) 
console.log(a.getAttribute("xxx") ) 
console.log(a.title) 

console. log(a.innerHTML) 

console. log(a. xxx) 


IE6、 IE7 下 返回 " 11 mM "o null, Wwe eu "o 
undefined. IE8, IE9, Chrome23, FF154#Operal2 
“Pik [elnull, null, null, "","" . undefined. 


因此 我 们 可 以 推导 出 这 样 一 个 方法 ， 回 答 我 们 
这 一 节 的 标题 。 


function isAttribute(attr, host){ 
// 有 些 属性 是 特殊 元 素 才 有 的 ， 需 要 用 到 第 二 个 参数 
host = host || document.createElement("div"); 
return host.getAttribute(attr) === null && host[attr] === v 























oid 0 
} 





9.3 UTA ENI hae E X op TAA J PE 
与 目 定义 属性 


经 过 社区 的 努力 ， 现 在 大 家 都 知道 IE6、IE7 不 
区 分 固有 属性 与 自 定义 属性 。 这 和 带 来 的 结果 是 ， 对 
某 个 固有 属性 进行 setAttribute， 我 们 不 需要 名 字 映 
射 就 能 生效 。 但 如 果 想 通过 浏览 器 嗅 探 法 来 识别 
IE6、IE7， 是 远 远 不 够 的 ， 因 为 用 户 可 能 使 用 旧版 
的 标准 浏览 右上 了 网。 另外， 我 们 也 不 得 不 考虑 国内 
可 恶 的 加 壳 正 浏览 器 。 因 此 我 们 最 好 是 通过 特征 侦 
测 来 判定 浏览 器 是 否 支 持 此 特性 。 














mootools 与 jQuery 各 上 自 使 用 了 两 种 帘 然 不 同 的 
方法 来 判定 。mootools 以 属性 法 设置 一 个 目 定 义 属 
性 ， 然 后 通 getAttribute 去 取 ， 看 是 不 是 等 于 预 设 
什 ， 是 怠 证 明 它 不 区 分 固有 属性 与 目 定义 属性 。 
jQuery 则 是 先 用 setAttribute 去 设置 cassName， 人 然后 
看 它 是 当 作 固有 属性 还 是 自 定 义 必 性， 如 果 是 上 自 定 


























义 必 性， 用 elclassName 是 取 不 到 值 的 ， 有 具体 如 表 9- 
2 所 示 。 


var el = document.createElement("div") 


el.random = ‘attribute'; //mootools 


‘attribute' ) 


console.log(el.getAttribute("random") != 


el.setAttribute("className", "t"); //jQuery 
console.log(el.className !== "t") 





表 9-2 





要 看 哪个 更 精确 ， 只 需要 IE8 浏 览 嚣 束 行 了 。 





IE8 大 肆 重 写 内 核 ， 是 为 了 区 分 固有 属性 与 自 定 义 
属性 的 ， 因 为 el.className 应 该 返回 undefined， 导 
致 结果 为 tue， 因 此 jQuery 获胜 。jQuery 把 这 个 特性 

称 之 为 getSetAttribute， 意 即 get/SetAttribute 没 有 


bug; mass Framework 称 之 为 attrInnateName， 意 即 
不 需要 名 字 映 射 用 原名 束 可 以 取 值 。 它 们 都 位 于 
supports 模 块 中 。 





9.4 下 的 属性 系统 的 3 次 演变 


微软 在 下 4 (1997 年 ) 添加 setAttribute、 
getAttribute API。 当 时 ，DOM 标 准 (1998) 还 没 
有 出 来 呢 ! 而 它 的 对 手 NS6 到 2000 年 才 难 产 出 来 。 








早期 的 DOM API 于 微软 来 说 ， 只 是 它 已 有 的 一 
些 方 法 的 再 包装 ， 这 些 包装 方法 无 法 与 它 原 来 的 那 
EHER. EEEN Daas, Bel ei 
document . getElementById("xxx") KIA TA, 
MEEF, KERIDA TA ASR A A 
DERRE, HEIME PINTRES. RIE 
捷 ， 或 者 使 用 document .all[ID] 来 取 ， 无 论 哪 种 都 
比 标准 的 短 ; X UlgetElementsByTagName, IE F 
有 document.all.tags() 方法 ， 此 方法 直到 IE9 还 有 























效 。 而 setAttribute("xxx"y "yyy") var ret = 


getAttribute("xxx") 只 不 过 是 el.xxx = "yyy" 


与 var ret = el.xxx 的 另 一 种 操作 形式 喷 了 了 。 明 日 
这 一 点 我 们 天 立即 理解 了 正 下 这 两 个 API 的 一 些 奇 怪 
STA TL 

el.setAttribute("className","aaa") 是 可 行 
的 ， {Hel.setAttribute("class", "aaa" ) 失败 ， 


因为 我 们 可 以 用 cdlassName 修 改 类 名 ， 但 不 能 


class。 


el.setAttribute("innerHTML", "&lt;p&gt;tes 
是 可 行 的 ， 因 为 我 们 可 以 用 innerHTML 添 加 内 容 。 


element.setAttribute("style", 
"background-color: #fff; color: #000;") 失 
败 ， 因 为 style 在 了 正 下 是 个 对 象 ，"background- 
color: #fff; color: #000;" 只 能 作为 它 的 cssText 


属性 的 值 。 


DOM level 1 隔年 承 制 定 出 来 了 。 


setAttribute/getAttribute 并 没有 微软 想象 得 那么 简 
单 ， 它 早期 规定 getAttribute 必 须 也 返回 字符 串 ， 就 
算 不 存在 也 是 空 字符 串 。 到 后 来 ， 
setAttribute/getAttribute 会 对 属性 名 进行 小 写 化 处 
理 。 用 getAttribute 去 取 没 有 显 式 设置 的 固有 属性 
时 ， 返 回 默认 值 〈 多 数 时 候 它 为 null 或 至 字符 
P); 对 于 没有 显 式 设置 的 自 定 义 属 性 ， 则 返回 
undefined。 于 是 微软 盆 了 眼 ， 第 一 次 改动 束 是 匆匆 
忙 忙 文 持 小 写 化 处 理 ， 并 在 getAttribute 方 法 添加 第 
二 参数 ， 以 实现 DOM1 的 效果 。 














getAttribute 的 第 二 个 参数 有 4 个 预 设 值 : 0 是 默 
认 ， 照 顾 下 早期 的 行为 ，1 属 性 名 区 分 大 小 写 ;: 2 取 
出 源 代码 中 的 原 字符 串 值 ( 注 ，IE5~IE7 对 动态 创 
建 的 节点 没 效 ，IE5 一 下 8 对 布尔 属性 无 效 ) ; 4 用 
于 href 属 性 ， 取 得 完整 路 径 。 














第 二 次 演变 是 区 分 固有 属性 与 目 定 义 属 性 ， 取 





类 名 再 也 不 用 className 了 。 布尔 属性 则 遵循 一 个 
哥 怪 的 规则 ， 只 要 是 显 式 设置 了 就 返 回 与 属性 名 同 
名 的 字符 串 ， 没 有 则 返回 空 字符 串 。 笔 者 相信 上 早期 

的 标准 浏览 融 也 是 这 样 做 的 。 但 标准 浏览 右 很 快 就 

变脸 了 ， 统 一 返回 用 户 的 预 设 值 。IE8 变 得 两 边 都 

不 讨好 ， 尽 管 它 一 心 想 与 标准 保持 一 致 ， 标 榜 目 己 

才 是 最 标准 的 。 比 如 ， 它 在 当时 还 推出 了 

Object.defineProperty. querySelector. postMessage 

等 具有 革命 意义 的 新 API， 但 它们 都 与 W3C 人 争吵 完 

的 结果 有 出 入 。 

















第 三 次 演变 ， 不 再 对 属性 值 进 行 干 预 ， 用 户 设 
什么 束 返 回 什 么 ， 上 忠于 用 户 的 决定 。 对 于 这 尘埃 落 
定 的 方案 ，IE9 终 于 与 标准 吻合 了 。 这 也 说 明 于 这 
种 慢 否 否 的 大 版 本 发 布 方式 已 经 浪 伍 了， 虽然 大 家 
都 对 FF 的 版 本 有 微 词 ， 但 人 家 却 你 住 了 与 
Chrome“ 叫 板 ” 的 地 位 。 








综观 正 的 属性 系统 的 “ 坦 剧 ”， 痢 因为 微软 总 想 
抢占 先 机 ， 而 叉 与 标准 同步 太 慢 所 致 。 





9.5 className tE 


我 们 操作 一 个 属性 通常 只 有 3 个 选择 : 设置 、 
读 取 、 删 除 。 但 className 有 点 特殊 ， 它 的 值 是 可 
以 用 空格 阳 开 ， 分 为 多 个 类 名 。 因 此 对 类 名 的 操作 
变 成 读 取 、 添 加 、 删 减 。 在 “上 代 王 
者 ”Prototype.js， 束 已 经 把 人 们 想 要 的 类 名 操作 总 结 
出 来 。 











//Prototype 1.7 
ClassNames: function(element) { 
return new Element.ClassNames(element); 


ty 


hasClassName: function(element, className) { 
if (!(element = $(element))) return; 
var elementClassName = element.className; 
return (elementClassName.length > 0 && (elementClassName == 
className | | 
new RegExp("(4|\\s)" + className + "(\\s|$)").test(elemen 
tClassName) )); 
ty 


addClassName: function(element, className) { 
if (!(element = $(element))) return; 
if (!Element.hasClassName(element, className) ) 
element.className += (element.className ? ' ' : '') + cla 
ssName; 
return element; 


ty 


removeClassName: function(element, className) { 
if (!(element = $(element))) return; 
element.className = element.className.replace( 
new RegExp("(4|\\s+)" + className + "(\\st+|$)"), ' ').str 
ip(); 
return element; 
}, 
toggleClassName: function(element, className) { 
if (!(element = $(element))) return; 
return Element[Element.hasClassName(element, className) ? 
"removeClassName' : 'addClassName'](element, className); 
}, 





除了 这 些 外 ， 还 提供 了 一 个 





Element.ClassNames 类 ， 用 于 直接 操作 类 名 。 这 不 
禁 让 笔者 想起 HTML5 提 供 的 classList。Prototype.js 
基本 定格 了 所 有 类 名 的 操作 方式 ， 比 如 
toggleClassName， 这 种 切换 方法 ， 纷 纷 被 其 他 框架 
抄 去 。 如 果 我 们 把 上 述 方法 名 的 Name 去 掉 ， 束 是 
jQuery 的 那 一 套 方法 名 ， 虽 然 YUI、EXT、dojo 都 是 
这 么 叫 ， 如 表 9-3 所 示 。 








表 9-3 








MochiKit hasElementClass addElementClass removeElementClass toggleElementClass 


setElementClass swapElementClass 


hasClassName addClassName removeClassName 


jQuery, 


avalon 


hasClass addClass removeClass toggleClass 


YUI3、 


mass、 kissy 


dojo1.8 containsClass addClass removeClass toggleClass replaceClass 
EXT4 containsClass addClass removeClass toggleClass replaceClass 
RightJS hasClass addClass removeClass toggleClass radioClass setClass getClass 


由 此 可 见 ， 这 和 套 API 在 业内 已 被 认可 ， 如 果 我 
们 写 框架 时 ， 命 名 最 好 不 要 与 它们 出 入 太 大 。 我 们 
尔 可 以 把 Prototype.js 的 实现 精简 一 下 ， 变 成 一 些 工 
有 具 函数 ， 在 不 引入 类 库 时 使 用 。 


hasClass addClass removeClass toggleClass replaceClass 








var getClass = function(ele) { 
return ele.className.replace(/\st+/," ").split(" "); 


}; 


var hasClass =function(ele,cls){ 
return -1 < (" "+tele.className+" ").indexof(" "+cls+" "); 


} 


var addClass = function(ele,cls) { 
if (!this.hasClass(ele,cls) ) 
ele.className += " "+cls; 


var removeClass = function(ele,cls) { 
if (hasClass(ele,cls)) { 
var reg = new RegExp('(\\s|4)'+clst+'(\\s|$)'); 
ele.className=ele.className.replace(reg," "); 


var ClearClass = function(ele,cls) { 
ele.className = "" 











最 后 我 们 看 一 下 avalon 是 如 何 实现 这 些 方法 
的 。avalon 首 先 实现 了 一 个 伪 ClassList 对 象 ， 方 便 








我 们 在 框架 里 面 操作 元 素 的 classList。classList 是 
HTML5 提 供 的 最 酷 特性 ， 它 拥有 add、remove、 
contains 《相当 于 hasClass) 、toggle 等 方法 ， 因 此 
我 们 完全 可 以 用 它 来 实现 上 面 那 套 方法 。 








var rnowhite = /\S+/g 
var fakeClassListMethods = { 
_toString: function () { 
var node = this.node 
var cls = node.className 
var str = typeof cls === 'string' ? cls : cls.baseVal 
var match = str.match(rnowhite) 
return match ? match.join(' ') : 


ty 
_contains: function (cls) { 
return (' ' + this + ' ').indexOf(' ' + cls + ' ') > -1 
ty 
_add: function (cls) { 
if (!this.contains(cls)) { 


this. _set(this + ' ' + cls) 
} 
ty 
_remove: function (cls) { 
this._set((' ' + this + ' ').replace(' ' + cls + ' ', ' 
')) 
ty 


__ set: function (cls) { 

cls = cls.trim() 

var node = this.node 

if (typeof node.className === 'object') { 
//SVG 元 素 的 className 是 一 个 对 象 SVGAnimatedString { bas 

eVal='', animVal=''}, 

// 只 能 通过 set/getAttribute 操 作 
node.setAttribute('class', cls) 

} else { 
node.className = cls 





} 
} //toggle 存 在 版 本 差异 ， 因 此 不 使 用 它 


function fakeClassList(node) { 
if (!('classList' in node)) {//IE10 才 支持 classList 
node.classList = { 
node: node 


} 
for (var k in fakeClassListMethods) { 
node.classList[k.slice(1)] = fakeClassListMethods[k 


} 
} 


return node.classList 





有 了 这 个 对 象 ， 我 们 实现 addClass 系 列 就 是 切 


水 果 那 么 简单 了 。 


‘add, remove'.replace(avalon.rword, function (method) { 
avalon.fn[method + 'Class'] = function (cls) { 
var el = this[0] || {} 
//https://developer .mozilla.org/zh-CN/docs/Mozilla/Fire 
fox/Releases/26 
if (cls && typeof cls === 'string' && el.nodeType === 


){ 


cls.replace(rnowhite, function (c) { 
fakeClassList(el)[method](c) 


}) 


return this 


}) 


avalon.fn.mix({ 
hasClass: function (cls) { 
var el = this[0] || {} 
return el.nodeType === 1 && fakeClassList(el).contains( 


toggleClass: function (value, stateVal) { 
var isBool = typeof stateVal === 'boolean' 
var me = this 
String(value).replace(rnowhite, function (c) { 
var state = isBool ? stateVal : !me.hasClass(c) 
me[state ? 'addClass' : 'removeClass'](c) 


}) 


return this 





有 了 以 上 这 4 个 方法 ， 就 能 应 付 所 有 关于 类 名 


的 需求 。 


9.6 ”Prototype.js 的 属性 系统 





无 论 哪个 框架 类 库 ， 早 年 都 是 将 它们 混在 一 起 
操作 。 杰 出 的 代表 是 Prototype.js 的 readAttribute、 
writeAttribute 与 jQuery 的 attr。 我 们 先 来 看 
Prototype.js 的 伟大 遗产 吧 。 


(1) AFR AY ACH 
(2) href,srcHJIEM FE 
(3) getAttributeNode 的 发 掘 。 
(4) 事件 钩子 的 处 理 。 
(5) 布尔 属性 的 处 理 。 


(6) style 属 性 的 下 处 理 。 





// Prototype.js 1.61 
readAttribute = function(element, name) { 
element = $(element); 


if (Prototype.Browser.IE) { 

var t = Element._attributeTranslations.read; 

if (t.values[name] ) 
return t.values[name](element, name); 

if (t.names[name])// 如 果 要 进行 名 字 映 射 
name = t.names[name]; 

if (name.include(':')) {// 如 果 XML 属 性 
return (!element.attributes || !element.attributes[ 

name]) ? null : 








—= 





element.attributes[name].value; 
} 
} 


return element.getAttribute(name) ; 








Prototype.js 认 为 总 是 正在 拖 后 腿 ， 只 对 下 进行 
调教 就行 了 。 处 理 方式 与 下 的 属性 系统 演变 史 一 








样 ， 对 属性 名 的 名 字 上 映射 、 属 性 值 进行 忠实 用 户 的 
字符 串 还 原 。 于 是 搞 出 
Element，attributeTranslations 对 象 ， 它 有 两 大 块 ， 
一 是 read 对 象 用 于 readAttribute， 二 是 write 对 象 用 于 
writeAttribute， 然 后 每 部 分 都 有 names 映 射 列表 与 
values A ALE 6 











Element. _attributeTranslations = (function() { 
// 判 定 浏 览 器 是 否 支持 用 Class 代替 clLlassName 
var classProp = 'className', 
forProp = 'for', 
el = document.createElement('div'); 





el.setAttribute(classProp, 'x'); 


if (el.className !== 'x') { 
el.setAttribute('class', 'x'); 
if (el.className === 'x') { 

ClassProp = 'class'; 

} 

} 

el = null; 

// 判 定 浏览 器 是 否 支 持 用 for 人 代替 htm1LFor 





el = document.createElement('label'); 
el.setAttribute(forProp, 'x'); 


if (el.htmlFor !== 'x') { 
el.setAttribute('htmlFor', 'x'); 
if (el.htmlFor === 'x') { 

forProp = 'htmlFor'; 

} 

} 

el = null; 

return { 
read: { 


names: { // 名 字 映 射 
'class': classProp, 
'className': classProp, 
'for': forProp, 
‘htmlFor': forProp 
ty 
values: {// 钧 子 函数 对 象 
// 处 理 普 通 自 定义 属性 
_getAttr: function(element, attribute) { 
return element.getAttribute(attribute); 


























ty 

// 处 理 src, href 等 路 径 相 关 的 属性 

_getAttr2: function(element, attribute) { 
return element.getAttribute(attribute, 2); 














—= 











ty 

// 处 理 ID 相 关 的 固有 属性 

_getAttrNode: function(element, attribute) { 
var node = element.getAttributeNode(attribu 


























te); 
return node ? node.value : 


Wit. 
了 


tr 
// 处 理事 件 onXXX 


_getEv: (function() { 























//.. A 
return f; 
HO, 
// 处 理 readonly，disable 等 布尔 属性 
_flag: function(element, attribute) { 
return $(element).hasAttribute(attribute) ? 

















—= 





attribute : null; 
ty 
// 处 理 样式 
style: function(element) { 
return element.style.cssText.toLowerCase()j; 


























ty 

// 处 理 title 

title: function(element) { 
return element.title; 




















} 


i 
HO; 











上 面 是 读 方法 的 处 理 ， 接 着 是 写 方法 。 





Element._attributeTranslations.write = { 
names: Object.extend({ 
cellpadding: ‘'cellPadding', 
cellspacing: ‘cellSpacing' 
}, Element. _attributeTranslations.read.names), 


values: { 
checked: function(element, value) { 
element.checked = !!value; 
ty 
style: function(element, value) { 
element.style.cssText = value ? value : ''; 
} 
} 


Element._attributeTranslations.has = {}; 

















// 处 理 不 规则 的 属性 名 转换 
$w('colSpan rowSpan vAlign dateTime accessKey tabIndex ' + 
"encType maxLength readOnly longDesc frameBorder').each 
(function(attr) { 
Element. _attributeTranslations.write.names[attr.toLowerCase 
()] = attr; 
Element. _attributeTranslations.has[attr.toLowerCase()] = at 











从 读 方 法 的 代码 可 看 到 ， 对 于 for、class 的 映 
射 ， 它 是 使 用 特性 侦 测 来 实现 的 。 然 后 对 不 同 的 属 
性 ， 采 取 不 同 的 方法 取信 ， 其 实 就 是 一 个 适 配 丹 。 
Element._attributeTranslations. values sit 2 “bug 72 di 
ar, KARKAT bug, LJE jQuery hy LFA ze ve 
行 改 民 与 深 挖 。 


IE6 一 下 8 表示 UREL 的 属性 会 有 一 些 返 回 补 全 的 
改过 编码 的 路 径 ， 如 action、background、 
BaseHref、cite、codeBase、data、dynsrc、href、 
longDesc、lowsrc、pluginspage、profile、src、url 与 
vrml。 但 一 般 框架 只 人 处理 href、src， 人 处 理 方式 很 简 
单 ， 即 将 getAttriubte 的 第 二 个 参数 设 为 2。 





<a href="index.html1">home</a> 

<script> 

var link = document.getElementsByTagName('a')[0]; 
link.getAttribute('href') // "http://www .cnblogs.com/rubylouvre 
/index.html"; 


link.getAttribute('href',2) //"index.htm1l"; 
</script> 





BFS lt SR, BATT Ay EH <a 
href="${ 链 接 1}" 作为 实验 样本 ， 如 表 9-4 所 示 。 


表 9-4 


getAttribute("href", 
href getAttribute("href") 
ms fre sam | ee, ram 


转 绝对 ， 汉 字 不 编码 ， 特 殊 | 转 绝对 ， 汉 字 不 编码 ， 特 殊 
符号 编码 符号 编码 















































转 绝对 ， 汉 字 不 编 
符号 编码 




















转 绝对 ， 全 部 编码 











转 绝对 ， 全 部 编码 








=] 
[T 
a 
EJ 
mT 
H 











转 绝对 ， 汉 字 编 码 ， 特 殊 符 |, 
号 不 编码 














SO, “正常 ”的 意思 是 ， 得 到 href 属 性 里 原始 
链接 ， 不 自动 转 绝对 地 址 ， 汉 字 和 符号 都 不 编码 。 





在 IE6、IE7 中 ，form 元 素 用 getAttribute 取 属性 
值 ， 可 能 得 到 它 辖 下 的 ID 值 或 name 值 相同 的 表单 元 
素 。 在 Prototype.js 下 ， 只 处 理 比较 常见 的 action 属 
性 。 下 面 的 例子 ， 在 IE6、IE7 下 都 是 返回 元 素 节 


/NO 








<form action="#" > 
<input id="name" > 
<input id="action" > 
<input name="id" > 
<input name="length" > 
<input id="xxx" > 
<input id="yyy" > 

</form> 


var el = document.getElementsByTagName("form") [0] 
alert(el.getAttribute("action") ) 
alert(el.getAttribute("id") ) 
alert(el.getAttribute("name") ) 


alert(el.getAttribute("length") ) 
alert(el.getAttribute("xxx") ) 
alert(el.getAttribute("yyy") ) 





Prototype.js 于 是 发 掘 到 getAttributeNode 方 法 。 
当然 也 可 以 用 attriubtes[xxx] 方 法 ， 只 要 得 到 特性 节 
点 束 好 办 本 。 


对 于 事件 钩子 ，Prototype.js 可 谓 是 费力 来 修改 
回调 的 toString。 不 过 在 此 之 前 ， 它 还 判定 元 际 是 否 
支持 事件 。 如 果 Prototype.js 的 作者 再 多 做 些 测试 ， 
其 实 getAttributeNode 与 attriubtes[xxx] 方 式 也 能 取 到 
正确 值 。 














对 于 布尔 属性 ，Prototype.js 是 用 _flag 内 部 方法 
去 取 的 。 如 果 el[xxx] 是 返回 true 的 情况 ， 直 接 返 回 
与 属性 同名 的 字符 串 ， 否 则 返回 字符 串 。 这 是 一 个 
没有 办 法 的 办 法 ， 因 为 对 于 布尔 属性 ，IE6 一 下 8 者 
无 法 取得 用 户 预 设 值 ， 无 论 是 getAttribute 的 第 二 个 
参数 方式 ， 还 是 getAttributeNode 方 法 、 








attributes[xxx] 77 SULA Xouter HTML HY) ZF BB a BY Y 
The JR HED A as OLE ie LI, EY 
布尔 属性 不 再 返回 同名 字符 串 ， 假 值 不 再 返回 空 字 
符 串 ， 忠 于 用 户 输入 。 于 是 ，Prototype.js 的 
readAttribute 方 法 在 不 同 浏览 器 中 的 返回 值 殴 不同 
了 。jQuery 做 出 的 处 理 是 ， 编 写 了 一 个 正则 ， 用 于 
匹配 布尔 属性 ， 统 一 所 有 浏览 喜 在 真 值 的 情况 下 返 
回 同名 字符 串 ， 假 值 运 回 undefined。 

















rboolean = /4(?:autofocus|autoplay|async|checked|controls|defer 
|disabled|hidden|loop |multiple|open| readonly | required|scoped|s 
elected)$/i 








(AVEC ICIE PRUE, XEN AENA AiR 
VE, MAKE BR AM PATO AR, AI AE 
晕 招 。 不 过 比 起 Prototype.js 已 是 很 大 进步 ， 后 者 只 
处 理 表 单元 素 的 几 个 特定 属性 : disabled, 


checked, readonly. multiple. 





IE 处 理 style 属 性 ， 即 统一 转换 它 的 cssText 属 


性 ， 这 个 所 有 框架 都 一 样 。 


在 写 入 属性 值 时 ，Prototype.js 宗 党 到 属性 有 两 
种 形态 。 一 种 是 存在 于 HTML 标 签 内 的 ， 不 区 分 大 
小 写 ， 不 过 现在 浏览 器 都 统一 将 它们 小 写 化 。 对 于 
存在 多 个 字母 个 数 与 排列 顺序 相同 但 大 小 写 不 同 的 
元 系 ， 标 准 浏 览 右 会 做 合并 处 理 ， 只 保留 第 一 个 属 
性 。DOM 形 态 是 区 分 大 小 写 ， 并 且 对 你 留 字 进行 
回避 ， 如 著名 的 class、for， 有 的 是 两 个 单词 组 成 ， 

要 转换 成 驼峰 风格 ， 有 的 则 完全 是 没有 规则 。 正 
如 英语 单词 的 单 复 数 转换 ， 一 开始 没有 规范 ， 大 家 
都 照抄 网 景 的 ， 然 后 又 摘 些 独创 的 属性 ， 经 过 这 人 么 
多 的 发 展 ， 我 们 一 个 小 小 映射 能 应 对 90% 的 特殊 情 
OUP xe BH To 














Prototype.js 列 出 了 15 个 需要 映射 的 情况 ， 而 
jQuery 的 只 有 12 个 ， 其 中 encoding 这 映射 在 标准 浏 
览 器 中 还 不 会 出 现 。 这 一 数字 在 mass Framework, 





升 了 36 个 ， 算 是 目前 兼容 较 全 面 的 。 


Prototype.js 干 这 活 的 对 象 为 
Element，attributeTranslations.write.names， 一 共处 
理 以 下 属性 : accessKey、cellPadding、 
cellSpacing, className, colSpan, dateTime, 
encType. frameBorder. htmlFor. longDesc, 
maxLength, readOnly. rowSpan., tabIndex, 


VAlign. 


jQuery 干 这 活 的 对 象 为 $.propFix， 一 共处 理 以 
下 属性 : cellPadding、cellSpacing、className、 
colSpan、 colSpan、contentEditable、encoding、 
frameBorder, htmlFor, rowSpan, rowSpan, 


useMap. 


mass Framework 干 这 活 的 对 象 为 $.propMap， 
共处 理 以 下 属性 : acceptCharset、accessKey、 
allowTransparency、bgColor、cellPadding、 


cellSpacing, ch, chOff, className. codeBase, 
codeType. colSpan. contentEditable. dateTime, 
defaultChecked. defaultSelected. defaultValue, 
encoding. frameBorder. htmlFor, httpEquiv. 
isMap. longDesc, marginHeight. marginWidth, 
maxLength. noHref. noResize. noShade, 
readOnly. rowSpan, tabindex, useMap, vAlign, 


vSpace, valueType. 





Prototype.j$ 的 writeAttribute 方 法 是 在 
Prototype.js 1.6 中 出 现 的 ， 决 定 了 传 入 null 与 false 属 
性 值 进 行 删 除 操作 的 游戏 规则 ， 但 是 被 jQuery 1.6 抄 
去 了 。 然 而 事实 上 ， 传 入 false 消 去 当前 布尔 属性 的 
效果 ， 也 只 有 removeAttribute 一 途 ， 这 是 聪明 的 做 
法 。 但 至 于 把 它 应 用 到 回 有 属性 ， 残 需 慎 重 考 虑 
了 。 反 过 来 想 ， 正 因为 Prototype.js 想 用 一 个 API 同 
时 处 理 固 有 属性 与 自 定 义 属性 ， 才 导致 删除 操作 也 
不 得 不 保持 一 致 。jQuery 追 随 Prototype.js 的 步伐 ， 

















于 是 挥 进 同 一 个 陷阱 。 


//Prototype.js1.61 
writeAttribute = function(element, name, value) { 
element = $(element); 
var attributes = {}, t = Element._attributeTranslations.wri 


te; 
if (typeof name == 'object') 
attributes = name; 
else 
attributes[name] = Object.isUndefined(value) ? true : v 
alue; 
for (var attr in attributes) { 
name = t.names[attr] || attr; 
value = attributes[attr]; 
if (t.values[attr]) 
name = t.values[attr](element, value); 
if (value === false || value === null) 
element .removeAttribute(name) ; 
else if (value === true) 
element.setAttribute(name, name); 
else 
element.setAttribute(name, value); 


} 


return element; 





9.7 jQuery 的 属性 系统 


早期 的 jQuery 针对 当时 如 日 中 天 的 Prototype.js 
提出 了 一 个 重要 的 口号 : 它 更 小 。 笔 者 还 是 希望 能 
带 来 一 点 启迪。jQuery 的 属性 系统 也 是 经 年 昧 月 ， 


量变 引 及 质变 的 绪 琳 。 








// jQuery1.01 
attr: function(elem, name, value){ 
var fix = { 

"for": "htmlFor", 
"Class": "className", 
"float": "cssFloat", 
innerHTML: "innerHTML", 
className: "className", 
value: "value", 
disabled: "disabled" 


}; 


if ( fix[name] ) { 
if ( value != undefined ) elem[fix[name]] = value; 
return elem[fix[name]]; 
} else if ( elem.getAttribute ) { 
if ( value != undefined ) elem.setAttribute( name, v 
alue ); 
return elem.getAttribute( name, 2 ); 
} else { 
name = name.replace(/-([a-z])/1ig, function(z,b){retu 
rn b.toUpperCase();}); 
if ( value != undefined ) elem[name] = value; 
return elem[name]; 


ty 


| 


这 个 方法 然后 不 断 甩 上 胀 ， 加 入 从 Prototype.js 发 
掘 出 来 的 特殊 属性 处 理 ， 以 及 社区 提交 的 补丁 。 到 
jQuery 1.5.2， 这 个 attr 方 法 已 经 接近 一 百 行 的 规 
模 。 于 是 jQuery 1.6 模 块 ， 在 jQuery 1.5 中 的 CSS 模 
块 想 出 了 好 方法 后 ， 把 cssHooks 适 配器 机 制 移 值 过 
来 ， 解 决 了 扩展 的 难题 。 





在 jQuery 1.6 中 存在 4 个 适配器 ， 从 单词 直译 过 
来 ， 就 是 钩子 : formHooks、attrHooks、 
propHooks、valHooks。formHook 是 在 attr 方 法 中 对 
付 旧版 本 下 的 form 元 系 用 的 。 到 jQuery 1.6.1， 增 加 
一 个 boolHooks 对 付 布尔 属性 。 到 jQuery 1.6.3, A 
们 发 现下 大 多 数 情况 使 用 getAttriubteNode 就 能 取 到 
正确 值 ， 因 此 对 formHooks 重 构 一 下 ， 更 名 为 
nodeHooks， 便 形成 今天 jQuery 的 属性 系统 ， 如 图 9- 
1 所 示 。 










removeAttr 


nodeHooks 










attrHooks 


S 
/ 
boolHooks 
“4 
propHooks 
图 9-1 





新 生 的 prop 方 法 异常 简单 ， 复 杂 性 都 移 到 钓 
子 。 上 古老 的 attr 方 法 则 无 比 复杂 ， 兼 任 读 、 写 、 删 
除 3 职 。 由 于 下 的 情况 不 得 不 动用 到 3 个 钩子 ， 钓 子 
只 处 理 有 问题 的 属性 ， 不 处 理 一 般 情 况 。 








//jquery1.83 
prop: function( elem, name, value ) { 
var ret, hooks, notxml, nType = elem.nodeType; 


if ( !elem || nType === || nType === 


return;// 跳 过 注释 节点 、 文 本 节点 、 特 性 


He 


J ayy 





} 


notxml = nType ! 1 || 
if ( notxml ) {// 如 果 是 HTML 文 档 的 元 素 节 


























name = jQuery.propFix[ name ] || 
hooks = jQuery.propHooks[ name ]; 
} 
if ( value !== undefined ) {// 写 方法 
if ( hooks && "set" in hooks && (ret 
value, name )) !== undefined ) { 
return ret,;// 处 理 特殊 情况 


























} else {// 处 理 通 用 情况 


return ( elem[ name ] 
} 


} else {// 读 方法 
if ( hooks && "get" in hooks && (ret 





value ); 





name )) !== null ) { 
return ret;// 处 理 特殊 情况 
} else {// 处 理 通用 情况 


return elem[ name ]; 


















































|| nType === 2 ) { 


!jQuery.isXMLDoc( elem ); 


name; 


hooks.set( elem, 


hooks.get( elem, 


} 
} 
ty 
attr: function( elem, name, value ) { 
var ret, hooks, notxml, nType = elem.nodeType; 
if ( !elem || nType === 3 || nType === || nType === 2 ) { 
return;// 跳 过 注释 节点 、 文 本 节点 、 特 性 节点 
} 
if ( typeof elem.getAttribute === "undefined" ) { 
return jQuery.prop( elem, name, value );// 文 档 与 vindow， 
只 能 使 用 prop 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 





if ( notxml ) {// 如 果 是 HTML 文 档 的 元 素 节点 








name = name.toLowerCase( );// 决 定 用 哪 
hooks jQuery.attrHooks[ name ] | | 
me ) ? boolHook : nodeHook ); 





MUT 


( rboolean.test( na 


} 


if ( value !== undefined ) { 
if ( value === null ) {// 模 仿 Prototype, js， 移 除 属性 
jQuery , removeAttr( elem, name ); 





} else if ( hooks && notxml && "set" in hooks && 
(ret = hooks.set( elem, value, name )) !== undefine 














return ret;// 处 理 特 殊 情况 























} else {// 处 理 通用 情况 
elem.setAttribute( name, value + "" ); 
return value; 











} 
} else if ( hooks && notxml && "get" in hooks && (ret = hoo 
ks.get( elem, name )) !== null ) { 
return ret;// 处 理 特殊 情况 






































} else {// 处 理 通用 情况 
ret = elem.getAttribute( name ); 
return ret === null ? undefined : ret; 











ty 





每 个 钩子 的 结构 也 不 一 样 ，propHooks、 
attrHooks 里 而 是 以 属性 命名 的 对 象 ， 里 面 可 能 存在 





get 方 法 、set 方 法 或 两 者 都 有 。boolHooks、 
nodeHooks 则 只 有 set、get 两 个 方法 ， 如 图 9-2 所 示 。 











钓 子 在 所 有 特殊 情况 下 都 命中 的 结构 图 。 目 前 
在 Firefox 下 命中 最 少 ， 在 IE6、IE7 命 中 最 多 。 








jQuery 对 属性 系统 的 主要 页 献 是 发 明 更 多 兼容 
性 问题 与 解决 方法 ， 有 具体 如 下 。 


(1) tabindex 的 取 值 问题 。tabindex 默 认 情 况 
下 只 对 表单 元 素 与 链接 有 效 ， 对 于 这 些 元 素 没有 显 
式 设 置 会 返回 0， 对 于 像 DIV 这 样 普 通 元 素 返 回 -1， 
但 正 都 是 返回 0。jQuery 对 此 做 了 统一 。 











(2) Safari 下 ，option 元 素 的 selected 取 值 问 
题 ， 必 须 向 上 访问 一 下 select 元 素 才 得 到 结果 。 





(3) 表单 元 素 的 value 属 性 的 操作 。 由 于 表单 
TCR PABA , FETE ILA FEA TE Ie) el, jQuery 
此 下 了 很 大 工夫 让 我 们 write less, do more! 








但 jQuery 的 属性 系统 也 存在 明显 的 缺憾 ， 具 体 
了 下 


(1) 4 FRR ce PAAL, {jQuery th 
有 竺 完善 ， 计 attrFixz、PpropFix 都 没有 尽责 。 


+ fixSpecified Object { name-true, id=true, coords=true } 


= jQuery Object { attriooks={...}, propHooks={...}, boolHook-{..}, 更 多 } 
= attrHooks Object { type-{...}, width-{..}, height-{..}, 更 多 } 
+ contenteditable Object { get=function(), set=function() } 
+ height Object { get=function(), set=function() } 
+ href Object { get=function() } 
+ src Object { get=function() } 
+ style Object { get=function(), set=function() } 
+ type Object { set=function() } 
+ value Object { get=function(), set=function() } 
+ width Object { get=function(), set=function() } 
+ boolHook Object { get=function(), set=function() } 
+ nodeHook Object { get=function(), set=function() } 
= propHooks Object { tabIndex-{...}, href=(...}, selected={ _.} } 
+ href Object { get=function() } 
+ selected Object { get=function() } 
+ tabIndex Object { get=function() } 


图 9-2 





(2) 对 布尔 属性 的 判定 存在 硬 编码 ， 准 确 率 
极 低 。 


(3) 它 添加 了 一 个 与 removeAttr 对 称 的 
removeProp 方 法 ， 但 里 面 的 实现 用 到 delete 操 作 符 ， 
在 chrome 真 的 是 把 固有 属性 从 原型 中 删 挥 ， 叶 致 下 
次 赋值 时 出 错 。 





(4) nodeHooks 是 使 用 getAttributeNode 实 现 
的 ， 虽 然 能 应 对 所 有 日 定义 属性 ， 但 判定 菜 些 固有 











属性 是 否 为 显 式 属性 时 ， 却 不 得 不 使 用 fixSpecified 
khi]. HY te fixSpecifiedXt REA — FH FS AS HL ill , 
TE Po tig BS Fe AAR A jQuery PIE EKER - 


(5) 因为 旧版 本 下 7 不 能 修改 表单 元 素 的 type 
属性 ， 瓯 阻止 我 们 在 所 有 浏览 右 修 改 type， =e 
为 很 难 服 众 。 比 如 密码 域 的 replaceholder 模 拟 、 

果 应 用 上 那些 人 性 化 的 掩 码 ， 束 需 aa 
type- 








接着 下 来 重点 介绍 avalon 的 实现 ， 它 在 jQuery 
的 属性 系统 上 做 了 大 量 改 进 ， 殉 服 了 以 上 缺点 。 


9.8 avalon} jE ERA 





avalon 的 属性 系统 其 实 是 供 其 ms-attr 指 令 内 部 
使 用 的 ， 能 同时 处 理 HTML 元 素 节点 、VML 元 素 节 
点 及 SVG 元 素 节 点 。 其 中 VML 读 写 属性 时 使 用 经 典 
的 'el.xxx = yyy 来 处 理 ， 而 SVG 则 必须 使 用 
set/getAttribute 方 法 。 











在 avalon 内 部 有 3 个 模块 来 实现 属性 系统 。 首 先 
是 propMap 模 块 ， 它 提供 一 个 对 象 ， 用 于 名 字 了 映 
射 ， 如 图 9-3 所 示 。 





https://github.com/RubyLouvre/avalon/tree/2.1.6/src/dom/attr 
var propMap = {// 不 规则 的 属性 名 映射 





'accept-charset': 'acceptCharset', 
‘char': 'ch', 

charoff: 'choff', 

"class': 'className', 


'for': 'htmlFor', 
"http-equiv': 'httpEquiv' 


} 
// 所 有 已 知 的 布尔 属性 
var bools = ['autofocus, autoplay, async, allowTransparency, checke 
d,controls', 
‘declare, disabled, defer, defaultChecked, defaultSelected, ', 
'isMap, loop, multiple, noHref, noResize, noShade', 
‘open, readOnly, selected ' 


—= 








]. join( ，) 


bools.replace(/\wt+/g, function (name) { 
propMap[name.toLowerCase()] = name 


t) 


// 驼 峰 名 
var anomaly = ['accessKey, bgColor, cellPadding, cellSpacing, codeB 
ase, codeType, colSpan', 
‘dateTime, defaultValue, contentEditable, frameBorder, longDesc 
,maxLength'+ 
‘marginwidth, marginHeight, rowSpan, tabIndex, useMap, vSpace, va 
lueType, vAlign' 
].join(',') 
anomaly.replace(/\wt+/g, function (name) { 
propMap[name.toLowerCase()] = name 


}) 


module.exports = propMap 





布尔 属性 + | 不 规则 属性 十 驼峰 属性 二 propmap 


图 9-3 








然后 是 判定 元 票 是 否 VML， 之 前 也 给 出 过 。 


function isVML(src) { 

var nodeName = src.nodeName 

return nodeName.toLowerCase() === nodeName && src.scopeName 
&& src.outerText === '' 


module.exports = isVML 





最 后 是 attrUpdate 模 块 ， 里 面 只 有 一 个 函数 。 





var propMap = require('./propMap' ) 

var isVML = require('../htm1l/isVML' ) 
var rsvg =/4\[object SVG\w*Element\]$/ 
var ramp = /&amp;/g 


function attrUpdate(node, vnode) { 
if (!node || node.nodeType !== 1 ) { 
return 
} 
vnode.dynamic['ms-attr'] = 1 
var attrs = vnode['ms-attr' ] 
for (var attrName in attrs) { 
var val = attrs[attrName] 
// 处 理 路 径 属 性 
/* istanbul ignore if*/ 
if (attrName === 'href' || attrName === 'src') { 
if (!node.hasAttribute) { 
val = String(val).replace(ramp, '&') 
// 处 理 IE67 自 动 转 义 的 问题 

















—= 


























node[attrName] = val 
/* istanbul ignore if*/ 
if (window.chrome && node.tagName === 'EMBED') { 
var parent = node.parentNode 
//#525 chrome1-37 下 embed 标 签 动 态 设置 src 








var comment = document.createComment('ms-src' ) 
parent.replaceChild(comment, node) 
parent.replaceChild(node, comment) 














} 

// 处 理 HTML5 data-* 属 性 
} else if (attrName.indexOf('data-') === 0) { 

node.setAttribute(attrName, val) 











} else { 
var propName = propMap[attrName] || attrName 
if (typeof node[propName] === 'boolean') { 
node[propName] = !!val 


// 布 尔 属 性 必须 使 用 el.,xxx = true|false 方 式 设 值 
// 如 果 为 false，IE 全 系列 下 相当 于 setAttribute(xxx,'') 
































// 会 影响 到 样式 ,需要 进一步 处 到 
} 
if (val === false) {// 移 除 属性 
node.removeAttribute(propName) 


continue 


//SVG 只 能 使 用 setAttribute(xxx，yyy)，VML 只 能 使 用 node .x 








XX = YYY , 
//HTML 的 固有 属性 必须 node .xxx = yyy 
var isInnate = rsvg.test(node) ? false : 
(!'avalon.modern && isVML(node)) ? true : 
attrName in node.cloneNode( false) 
if (isInnate) { 
node[propName] = val + '' 
} else { 
node.setAttribute(attrName, val) 
} 
} 
} 
} 


module.exports = attrUpdate 





图 9-4 已 经 涉及 MVVM 的 高 阶 内 容 了 。 








attrUpdate 为 一 个 视 几 刷新 函数 ，node 为 真实 元 又 节 
FR vnodeA ket Trt. MEINT ae Ay ABER AS 
普通 的 JS 对 象 就 行 了 ， 术 茶 个 节点 的 结构 
与 内 容 ， 但 比 真 实 和 点 是 轻 量 多 。vnode 上 有 一 个 
ms-attr 属 性 ， 它 或 许 是 一 个 对 象 ， 也 或 许 不 存在 。 




















此 对 象 大 概 如 下 。 


vnode["ms-attr"]= { 
title: "aaa", 
ddd: false, 
eee: true 


} 
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当 某 一 个 属性 的 值 为 false 时 ， 表 示 我 们 要 移 除 
此 属性 ， 其 他 操作 则 进行 号 操作 。avalon 内 部 没有 
对 普通 属性 的 读 操作 ， 因 此 在 MVVM 中 ， 这 个 不 太 
tH FH o 


9.9 value 的 操作 


上 上 一 下 说 avalon 内 部 没有 对 普通 属性 的 读 操 
作 ， 但 对 于 value 束 不 能 绽 混 过 天 了 ， 因 为 value 属 
性 是 要 提交 到 后 全 的 。 由 于 其 重要 性 ， 于 是 我 们 单 
独 拿 出 来 讲解 。 





value 必 性， 一 般 而 言 ， 只 有 表单 元 素 的 value 
才 对 我 们 有 用 。 问 题 是 ， 表 单元 素 的 种 类 非常 多 ， 
每 一 个 取 法 与 赋值 各 有 不 同 ， 因 此 我 们 最 好 在 内 部 
使 用 一 个 适配器 来 实现 它 。 有 关 表 单元 素 取 value 值 
与 大 部 分 浏览 器 的 莱 容 性 问题 被 ]Query 友 现 并 消灭 
了 ，avalon 只 是 在 字 节 上 做 压缩 处 理 。 














下 面 分 别 摘 述 每 个 表单 元 系 的 情况 。 





select 元 素 ， 它 的 value 值 就 是 其 被 选中 的 option 
孩子 的 value 值 。 不 过 ，select 有 两 种 形态 ， 一 种 type 


为 select-one， 另 一 种 为 Select-multiple， 束 是 当 用 户 
PAKEA J multiplek tE. ELRES T, RIIE 
以 在 Windows 系 统 下 按 住 Ctrl 键 进行 多 选 ，Mac 系 统 
下 按 住 Command 键 进行 多 选 


option 元 素 ， 它 的 value 值 可 以 是 value 属 性 的 

值 ， 亦 可 以 是 其 中 间 的 文本 ， 换 言 之 是 innerText。 
当 用 户 没 有 显 式 设置 value 属 性 时 ， 它 就 取 
innerText， 不 过 这 个 innerText 要 用 text 属 性 来 取 ， 束 
像 script 标 签 那样 。 可 能 有 人 会 问 ， 为 什么 不 用 
innerHTML 呢 ? 因为 这 个 option 元 素 的 text 属 性 比 
innerHTML 多 做 了 一 个 trim 操 作 ， 去 挥 两 边 的 空 日 

(旧版 本 下 的 innerHTML 会 做 trim 操 作 ， 标 准 浏览 
器 不 会 ) 。 那 么 如 何 判 定 它 是 显示 设置 了 value 属 性 
昵 ? 这 将 在 10.1 节 中 提 到 ， 元 素 市 友 有 个 attribute 属 
性 ， 它 是 个 类 数组 对 象 ， 里 面 是 一 个 个 对 象 ， 每 个 
对 象 拥有 value、name、specified、ownerElement 等 


一 大 堆 属 性 ， 我 们 判定 specified 是 否 为 true 就 行 了 。 














IE8 与 其 他 浏览 器 ， 我 们 还 可 以 使 用 hasAttribute 方 
法 来 判定 。 





button 元 素 ， 它 的 取 值 情况 与 option 元 系 有 点 类 
似 但 又 不 尽 然 。 在 IE6、IE7 中 ， 它 是 取 元 素 的 
innerText， 到 IE8 时 它 才 与 其 他 浏览 器 保持 一 致 ， 
取 value 属 性 的 值 。 不 过 在 标准 浏览 左下 ，button 标 
SAAS RANE, FFA REN, JAER 
其 自 丑 的 value 值 。 我 们 应 该 统一 返回 其 value 值 。 





checkbox、radio 在 设置 value 时 ， 应 该 考虑 对 
checked 属 性 的 修改 。 


因此 为 了 对 应 这 么 多 奇怪 情况 ， 我 们 又 需要 引 
入 钩子 对 象 ， 像 上 一 章 的 cssSHooks 那 样 ， 弄 一 个 


valHooks. 





avalon.fn.val = function (value) { 
var node = this[0] 


if (node && node.nodeType === 1) { 
var get = arguments.length === 0 
var access = get ? ':get' : ':set' 


var fn = valHooks[getValType(node) + access] 


if (fn) { 
var val = fn(node, value) 
} else if (get) { 
return (node.value || '').replace(/\r/g, '') 
} else { 
node.value = value 
} 


J 


return get ? val : this 





里 面 有 一 个 getValType 方 法 ， 用 来 告诉 我 们 接 
者 下 来 该 调用 什么 钩子 方法 。 


function getValType(elem) { 

var ret = elem.tagName.toLowerCase() 

return ret === 'input' && /checkbox|radio/.test(elem. type) 
? 'checked' : ret 


} 





接着 逐个 击破 。 


首先 option 元 素 的 value 值 ， 如 果 用 户 没 有 写 
value 属 性 ， 会 取 其 innerText 作 value 值 的 。 





var roption = /^<option(? :\s+\w+(?:\s*=\s*(?:"[A"]*" EA] EA 
\s>]+))?)*\s+value[\s=]/i 


valHooks['option:get'] = avalon.msie ? function (node) { 
/V/ 在 IE11 及 W3C， 如 果 没 有 指定 value， 那 么 node ,valLue 默 认为 node ,ft 











ext (存在 trim 作 ) , 18 

//IE9、IE10 则 是 取 ijnnerHTML( 没 trim 操 作 ) 

//specified 并 不 可 靠 ， 因 此 通过 分 析 outerHTML 判 定 用 户 有 没有 显示 定 
Xvalue 

return roption.test(node.outerHTML) ? node.value : node 
.text.trim() 

} : function (node) { 
return node.value 























然后 是 select 元 素 的 value 值 的 处 理 ， 它 会 同步 
底下 的 option 元 素 。 





valHooks['select:get'] = function (node, value) { 
var option, options = node.options, 
index = node.selectedIndex, 
getter = valHooks['option:get'], 
one = node.type === 'select-one' || index < 0, 
values = one ? null : [], 
max = one ? index + 1 : options.length, 
i = index < 0 ? max : one ? index : 0 
for (; i < max; I++) { 
option = options[i] 
//IE6-9 在 reset 后 不 会 改变 selected， 需 要 改 用 i === index 判 定 
// 我 们 过 滤 所 有 disabled 的 option 元 素 ， 但 在 safari5 下 ， 
// 如 果 设 置 optgroup 为 disable， 那 么 其 所 有 孩子 都 disable 
// 因 此 当 一 个 元 素 为 disable， 需 要 检测 其 是 否 显 式 设置 了 disable 及 
其 父 节点 的 disable 情 况 
































if ((option.selected || i === index) && !option.disa 
bled && 
(!option.parentNode.disabled || option.paren 
tNode.tagName !== 'OPTGROUP' ) 
) { 
value = getter(option) 
if (one) { 


return value 


} 
// 收 集 所 有 selected 值 组 成 数组 返回 








values.push(value) 


} 
} 


return values 


} 


valHooks['select:set'] = function (node, values, optionSet) { 
values = [].concat(values) // 强 制 转换 为 数组 
var getter valHooks[ 'option:get' | 
for (var i ©, el; el = node.options[it++]; ) { 
if ((el.selected = values.indexOf(getter(el)) > -1) 








) i 
optionSet = true 
} 
} 
if (!optionSet) { 
node.selectedIndex = -1 
} 
} 
} 





//checkbox 的 value 默 认为 on， 唯 有 Chrome 返回 F 
if (!support.checkOn) { 
valHooks["checked:get"] = function(node) { 
return node.getAttribute("value") === null ? "on" : nod 





e.value; 


}; 
} 
// 处 理 单 选 框 、 复 选 框 在 设 值 后 checked 的 值 


valHooks["checked:set"] = function(node, name, value) { 
if (Array.isArray(value)) { 
return node.checked = !!~value.indexOf(node.value) ; 




















} 





9.10 总 结 





目 定 义 属 性 与 回 有 属性 的 区 刚 如 下 。 





(1) TRA ATERIEENY, GUHA property, m 
目 定 义 属 性 则 是 后 来 添加 的 。 





(2) 在 W3C 规 范 中 ， 只 有 在 HIML 标 签 定 义 
的 属性 才 会 出 现在 元 素 的 attributes 对 象 ， 这 些 属 性 
又 叫 显 式 属性 。 








(3) 目 定 义 属性 在 初始 化 时 同步 同名 的 固有 
属性 。 





(4) 目 定义 属性 的 值 都 是 字符 串 。 





(5) 大 多 数 情 况 下 ， 我 们 修改 自 定义 属性 
时 ， 会 同步 固有 属性 ， 但 修改 固有 属性 时 ， 不 会 影 
啊 目 定义 属性 。 
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第 10 章 “PC 端的 事件 系统 


事件 系统 是 很 大 的 一 块 ， 因 为 我 们 与 PC 之 间 的 
交互 行为 就 存在 各 种 形式 ， 比 如 我 们 可 以 通过 键盘 
行 交 互 ， 鼠 标 进行 交互 ， 或 者 直接 触摸 屏幕 进行 
交互 。 此 外 ， 即 便 你 什么 也 不 做 ，PC 也 单方 面 告诉 
你 现在 是 处 于 茶 种 状态 ， 如 页 面 的 DOM 树 构建 完 
毕 会 抛 出 一 个 事件 ， 所 有 资源 加 载 完毕 也 会 抛 出 一 
个 事件 ， 图 片 加 载 成 功 或 失败 也 会 抛 出 事件 ，CSS3 
动画 开始 或 结束 也 会 抛 出 事件 ， 甚 至 一 个 元 素 插 入 
DOM 树 或 移出 DOM 树 ， 它 的 某 个 属性 值 发 生 改 变 
了 ， 现 在 都 有 对 应 的 事件 抛 出 来 了 。 所 有 事件 的 设 
计 还 是 很 一 致 的 ， 都 有 一 个 参数 ， 为 一 个 事件 对 
象 ， 会 告诉 你 事件 源 在 哪里 ， 它 是 什么 事件 。 


iS 


Xy 


ae 











EPC. FAR ALVA TE le ea, Mas 
经 提供 好 “弹药 ”， 我 们 只 需要 稍 作 改 造 束 可 以 用 。 
而 在 移动 端 ， 所 有 能 用 的 事件 都 需要 合成 出 来 。 这 





也 古本 书 将 它们 将 分 开 来 说 的 缘故 。 


告诉 大 家 一 个 技巧 ， 后 问 过 到 复杂 的 问题 都 是 
中 间 再 加 一 层 ， 而 我 们 处 理事 件 的 兼容 问题 ， 则 是 
再 包 一 个 图 数 。 外 包 一 个 处 理 函 数 ， 这 点 类 似 于 
AOP， 将 重复 的 部 分 抽取 出 来 “如 事件 对 象 的 标准 
化 处 理 ; ee 频 或 调度 事件 的 函数 节 
VI ss ， 这 个 编程 技巧 以 后 我 们 会 经 常用 
到 。 





PC 让 利用 事件 一 宽 ， 如 图 10-1 所 示 。 
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图 10-1 


10.1 原生 API 简 介 


事件 系统 是 一 个 框 染 非 常 重要 的 部 分 ， 用 于 响 
应 用 户 的 各 种 行为 。 


浏览 占 提 供 了 3 种 层次 的 API。 最 原始 的 是 写 在 
元 系 标 签 内 。 再 次 是 在 脚本 中 ， 以 el .onXxXX= 
function 绑 定 的 方式 ， 通 称 为 DOM0 事 件 系统 。 最 
后 是 多 投 事件 系统 ， 一 个 元 又 的 同一 类 型 事件 可 以 
绑 定 多 个 回调 ， 通 称 为 DOM2 事 件 系统 。 由 于 浏览 
NER MF EAEAP. 





IE 与 Opera 方 法 如 下 。 


HMF: el.attachEvent("on"+type, callback) 
AF: el.detachEvent("on"+type, callback) 
document .createEventObject() 











el.fireEvent(type, event) 





W3C 方 法 如 下 。 


E 事 件 : el.addEventListener(type, callback, [phase] ) 
ERE: el.removeEventListener(type, callback, [phase]) 
事件 : el.createEvent (types) 


事件 : event.initEvent() 














派发 事件 : e1.dispatchEvent (event) 








从 API 的 数量 与 形式 来 看 ，W3C 提 供 的 复杂 很 
多 ， 相 对 应 也 强大 很 多 ， 下 面 笔者 会 逐一 详 述 。 

首先 呈 上 几 个 简单 的 实现 。 如 果 是 简单 的 页 
面 ， 就 用 简单 的 方式 打发 ， 没 有 必要 动用 框架 。 不 
过 ， 事 实 上 ， 整 个 事件 系统 就 建立 在 它们 的 基础 
a 








function addEvent(el, type, callback, useCapture ){ 
if(el.dispatchEvent ) {//w3c 7h e 
el.addEventListener( type, callback, !!useCapture ); 
selse { 
el.attachEvent( "on"+type, callback ); 


} 





return callback;// 返 回 callback 方 便 和 卸载 时 用 


function removeEvent(el, type, callback, useCapture) { 
if(el.dispatchEvent){//W3C 方 式 优先 
el.removeEventListener( type, callback, !!useCapture ) 


yelse { 
el.detachEvent( "on"+type, callback ); 


J 


function fireEvent(el, type, args, event){ 

args = args || {} 

if(el.dispatchEvent ) {//w3c7 Rè 
event = document.createEvent("HTMLEvents"); 
event.initEvent(type, true, true ); 

selse { 
event = document.createEventObject(); 

} 

for(var i in args) if(args.hasOwnProperty(1)){ 
event[i] = args[i] 


} 

if(el.dispatchEvent) { 
el.dispatchEvent(event); 

selse{ 
el.fireEvent('on'+type, event) 


} 





这 3 个 方法 也 经 和 常 出 现 于 各 种 笔试 中 ， 因 此 大 
家 要 切记 。 


10.2 ”onXXX 绑 定 方式 的 缺陷 


onXXX 既 可 以 写 在 HITML 标 签 内 ， 也 可 以 独立 
出 来 ， 作 为 元 素 季 点 的 一 个 特殊 属性 来 处 理 。 不 过 
作为 一 种 古老 的 绑 定 方式 ， 它 很 难 预测 到 后 来 人 对 
这 方面 的 扩展 。 











总 结 起 来 有 以 下 不 足 。 


(1) onXXX 对 DOM3 新 增 事 件 或 FF 某 些 私有 
实现 无 法 支持 ， 主 要 有 以 下 事件 : 





DOMActivate 
DOMAttrModified 
DOMAttributeNameChanged 
DOMCharacterDataModified 
DOMContentLoaded 
DOMELementNameChanged 
DOMFocusIn 

DOMFocusOut 

DOMMouseScroll 
DOMNodeInserted 
DOMNodeInsertediIntoDocument 
DOMNodeRemoved 
DOMNodeRemovedFromDocument 
DOMSubtreeModified 
MozMousePixelScroll 


sl 
ANWAR, ET See ae EEE, th 

用 到 DOMContentLoaded 5 DOMMouseScroll. 

DOMContentLoaded 用 于 检测 DomReady， 


DOMMouseScroll 用 于 在 FF 模拟 其 他 浏览 器 的 
mousewheel 事 件 。 


(2) onXXX 只 人 允许 元 素 每 次 绑 定 一 个 回调 ， 
重复 绑 定 会 冲 掉 之 前 的 绑 定 。 








(3) onXXX 在 IE 下 回调 没有 参数 ， 在 其 他 浏 
览 器 下 回调 的 第 一 个 参数 是 事件 对 象 。 





(4) onXXX 只 能 在 冒 泡 阶段 可 用 。 


10.3 attachEvent 的 缺陷 


attachEvent 是 微软 在 下 5 添加 的 API，Opera 也 文 
持 。 对 于 onXXX 方 式 ， 它 可 以 允许 同一 元 系 同 种 事 
件 绑 定 多 个 回调 ， 也 融 是 所 谓 的 多 投 事件 机 制 。 但 
它 禹 来 的 砍 烦 只 多 不 少 ， 存 在 以 下 几 点 缺陷 。 








(1) IE 下 只 支持 微软 系 的 事件 ，DOM3 事 件 
一 概 不 能 


(2) IE 下 attchEvent 回 调 中 的 this 不 是 指 问 被 绑 
REIL, ‘If zewindow! 


(3) 正 下 同 种 事件 绑 定 多 个 回调 时 ， 回 调 并 
不 是 按照 绑 定 时 的 顺序 依次 触发 的 ! 


(4) IE 下 event 事 件 对 象 与 W3C 的 存在 太 多 差 
异 了 ， 有 的 无 法 对 上 号 ， 比 如 currentTarget。 








(5) IE 还 是 只 支持 冒 } 
E 持 冒 泡 阶段 〈 如 图 10-2 所 


JS 事件 捕获 与 事件 冒 泡 原型 图 


htm1 事 事 
useCapture=true 件 件 useCapture=false 
捕 o ® 
body IK 泡 
@ © 
ul 
e @ 
li 
@ ® 
p 
@ ® 


事件 目标 (target) 


图 10-2 


不 过 下 还 是 不 断 进 步 的 。 





<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; cha 
rset=UTF-8"> 
<script> 


window.attachEvent("onload", function(e) { 
alert(e); 
J); 
</script> 
</head> 
<body> 
<div>TODO write content</div> 


</body> 
</html> 





IE6、 了 IE7 的 效果 如 图 10-3 所 示 。 
IE8 的 效果 如 图 10-4 所 示 。 


IE9 的 效果 如 图 10-5 所 示 。 





图 10-5 


从 一 开始 不 知 弹出 什么 东西 ， 到 现在 明确 这 是 
一 个 事件 对 象 ， 正 的确 是 在 不 断 进 步 。 不 过 ，W3C 
的 事件 系统 已 经 是 大 势 所 趋 ， 微软 也 hold 不 住 ， 从 
IE9 起 支持 W3C 那 一 套 API， 这 对 我 们 实现 事件 代理 
非常 有 帮助 ! 


10.4 _ addEventListener 的 缺陷 


W3C 这 一 套 API 也 不 是 至 善 至 美 ， 毕 竟 标 准 总 
是 涉 后 于 实现 ， 剩 下 的 那 4 个 标准 浏览 右 各 有 目 己 
的 算盘 ， 它 们 之 间 亦 有 不 一 致 的 地 方 。 





C1) 新 事件 非常 不 稳定 ， J 
就 被 废弃 。 在 早期 的 Sizzle 选 择 器 引擎 中 ， 有 这 
几 句 : 





document .addEventListener ("DOMAttrModified", invalidate, false); 
document .addEventListener("DOMNodeInserted", invalidate, false); 
document .addEventListener ("DOMNodeRemoved", invalidate, false); 





现在 这 3 个 事件 都 被 废弃 了 ERAR, MA 
变动 事件 都 完 重 了 ) , FF145Chrome18 开始 用 


MutationObserver 代 蔡 它 


(2) Firefox 既 不 文 持 focusin、focus 事 件 ， 也 
不 支持 DOMEocusIn、DOMFocusOut， 直 到 现在 也 





AS E & FA mousewheel4t #4 DOMMouseScroll. 


Chrome 不 支持 mouseenter 与 nouseleave。 


因此 不 要 以 为 标准 浏览 费 就 肯定 会 实现 W3C 钦 
定 的 标准 事件 ， 它 们 也 有 抗旱 的 时 候 ， 所 以 特征 侦 
测 必 不 可 少 。 最 可 恨 的 是 国内 一 些 浏览 器 套用 
webkit 内 核 ， 为 了 “超越 ”本 版 浏览 器 的 HITML5 跑 分 

(HTMLS5test.com) ， 竟 然 实现 了 一 些 无 用 的 空 接 
口 来 骗 过 特征 侦 测 ， 因 此 必要 时 ， 我 们 还 得 使 用 非 
第 三 烦 的 功能 侦 测 来 检测 浏览 器 是 否 文 持 此 事件 。 


(3) CSS3 给 私有 实现 添加 自 定 前 级 标识 的 坏 
习惯 也 漫延 到 一 些 与 样式 尽 居 相关 的 事件 名 上 。 比 
如 transitionend 事 件 名 ， 这 个 后 级 名 与 大 小 写 混合 成 
SHAS, HARF. 








(4) 第 3 个 参数 useCapture 只 有 非常 新 的 浏览 
器 中 才 是 可 选项 ， 比 如 FF6 或 之 前 版 本 是 必 选 的 ， 
为 安全 起 见 ， 请 确保 第 3 个 参数 为 布尔 值 。 第 4 个 参 





数 听 说 是 FF 专 有 实现 ， 人 允许 跨 文 档 监 昕 事件 。 第 5 
个 参数 ?的 确 存 在 第 5 参数 ， 不 过 它 只 存在 于 Flash 
语言 的 同名 方法 中 。 现 在 前 端 工 程 师 还 是 要 求助 于 
Flash， 残 作为 一 个 知识 点 收 下 吧 。 有 的 面试 官 会 路 
界 考 这 种 东西 。 在 Flash 下 ，addEventListener 的 第 4 
个 参数 用 于 设置 该 回调 执行 时 的 顺序 ， 数 字 大 的 优 
先 执行 ， 第 5 个 参数 用 来 指定 对 侦 听 器 函数 的 引用 
是 轮 引 用 还 是 正常 引用 。 











(5) 事件 对 象 成 员 的 不 稳定 。 


W3C 那 套 是 从 浏览 锅 厂 商 抄 来 的 ， 人 家 者 用 了 
这 么 久 ， 难 免 与 标准 不 一 致 。 





FF 下 event.timeStamp 返 回 0 的 问题 ， 这 个 bug， 
2004 年 就 有 人 提交 了 ， 直 到 2011 年 才 被 修复 。 


https://bugzilla.mozilla.org/show_bug.cgi?id=238041 





Safari 下 event.target 可 能 是 返回 文本 节点 。 


INNS 


event.defaultPrevented, event.isTrusted-§ 


stopImmediatePropagation 的 可 用 性 很 低 ， 它 们 属于 
DOM3 event 规 汇 。 





defaultPrevented 属 性 是 用 于 确定 事件 对 象 有 没 
有 调用 preventDefault 方 法 。 之 前 标准 浏览 右 都 统一 
用 getPreventDefault 方 法 来 干 这 事 ， 在 jQuery 源码 
中 ， 你 会 发 现 它 是 用 isDefaultPrevented 方 法 来 做 。 
it, isDefaultPreventedH) tA 4 4U AW3C# Ai, Fy 
见 这 里 : 





不 
参 


http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-s 
cript-binding. html 














isTrusted 属 性 用 于 表示 当前 事件 是 否 是 由 用 户 
行为 触发 〈 比 如 说 真实 的 鼠标 点 击 触 发 一 个 click 事 
件 ) ， 还 是 由 一 个 脚本 生成 的 〈 使 用 事件 构造 方 





法 ， 比 如 event.initEvent) 。 


stopImmediatePropagation 用 于 阻止 当前 事件 的 
冒 泡 行 为 并 且 阻 止 当前 事件 所 在 元 素 上 的 所 有 相同 
类 型 事件 的 事件 处 理 函 数 的 继续 执行 。 正 9+ 全 部 实 
现 ( 但 是 ，IE9、IE10 的 event.isTrusted 有 bug。 
link.clickO 后 返回 的 也 是 true) 。 

















Chrome5 一 Chrome17 部 分 实现 (event.isTrusted 
未 支持 ) 。Safari5 才 部 分 实现 〈event.isTrusted 未 文 


持 ) 。 


Operal0、Operal1 部 分 实现 
CstopImmediatePropagation 以 及 event.isTrusted 未 实 
现 ， 而 仅仅 实现 了 defaultPrevented) 。 


Opera12 部 分 实现 〈stopImmediatePropagation 仿 
然 未 实现 ， 但 实现 了 e.isTrusted) 。 


Firefox1.0~Firefox5, REIN 


stopImmediatePropagation#lldefaultPrevented, {1X 
实现 了 event.isTrusted。isTrusted 在 成 为 标准 前 ， 是 
Firefox 的 私有 实现 。 


Firefox6~Firefoxl0, {MAC SEH 
stopImmediatePropagation. Firefoxll, FIL 


stopImmediate Propagation. 


(6) PRENI Waa BCA INARI RIES ~ IESE 
propertychange3# {4 . 


虽然 标准 浏览 器 有 input、DOMAttrModified、 
MutationObserver， 但 比 起 propertychange 都 弱 爆 
了 。Ppropertychange 可 以 监听 多 种 属性 变化 ， 而 不 单 
单 是 value 值 ， 上 外 它 不 区 分 attribute 和 Property， 


H 


此 你 无 论 是 通过 el.xxx = yyy， 还 是 
el.setAttribute(xxx, yyy) 都 接触 过 此 事件 。 具 体 可 参 
疝 下 面 这 篇 博文 。 


http://www.cnblogs.com/rubylouvre/archive/2012/05/26/2519263.ht 





10.5 handleEvent5 
EventListenerOptions 


浏览 器 是 不 断 进化 的 ， 其 他 语言 验证 过 的 好 东 
西 会 不 断 移植 过 来 ， 像 stopImmediatePropagation 原 
来 束 是 Flash 的 API。 本 节 介 绍 的 handleEvent 也 是 出 
十 Flash。 


一 般 来 说 ， 我 们 是 这 样 使 用 addEventListener 
的 : 


dom.addEventListener(type, handler, true/false) 


handlerxe—“S PHL, bl Was ER AS SE 
件 对 象 。 


DOM2 (IE9+ 文 持 ) 开始 文 持 另 一 种 形式 ， 
handle 为 一 个 对 象 ， 里面 有 一 个 handleEvent 方 法 。 


var events = { 
attr: 222, 
handleEvent: function(event) { 
console.log(this.attr)//222 
Switch (event.type) { 
case 'touchstart': this.touchstart(event); break; 
case 'touchmove': this.touchmove(event); break; 
case 'touchend': touchend(event); break; 
} 
ty 
touchstart: function(event) { 
ty 


touchmove: function(event ) { 


了 
touchend :function(event ) { 


} 


} 


document .getElementById('elementID').addEventListener('touchsta 
rt',events, false); 

document .getElementById('elementID' ).addEventListener ('touchmov 
e',events, false); 

document ..getElementById('elementID' ).addEventListener('touchend 
', events, false); 





这 样 写 有 两 个 好 人 处。 


(1) 将 所 有 事件 回调 都 集中 一 个 对 象 上 ， 方 
便 共 至 信息 。 比 如 上 面 例子 中 的 attr， 由 于 this 直 接 
指 问 这 个 对 象 ， 我 们 就 直接 可 以 通过 e.target.attr 访 
问 到 它 的 值 。 


(2) 动态 改变 事件 处 理 器 ， 通 过 e.type 或 其 他 
言 恩 调 上 度 相 关 的 回调 ， 不 用 先 remove 再 add。 





201644, firefox 4a xF DOM 4 的 


EventListenerOptions : 


dom.addEventListener(type, handler, EventListenerOptions) ; 


EventListenerOptions 里 面 有 3 个 可 选 配 置 项 ， 
MRA, PUAN false. 





(1)〉capture， 与 之 前 一 样 ， 决 定 冒 泡 或 捕 





(2) passive， 为 true 时 ， 会 将 回调 里 面 的 
e.preventDefault() 操 作 无 效 化 ! 


(3) once， 为 true 时 ， 此 事件 回调 会 只 执行 一 
次 就 自动 解 绑 ! 


https://www.webreflection.co.uk/blog/2016/04/17/new-dom4-standa 
rds 





这 个 兼容 性 很 差 ，Chrome49 与 Firefox49 才 开始 


10.6 Dean Edward“ 大 神 ” 的 addEvent.js 
VAS a} AT 


这 是 Prototype 时 代 早 期 出 现 的 一 个 事件 系统 ， 
jQuery 事件 系统 的 源头 ， 亮 点 如 下 。 


(1) 有 意识 地 屏蔽 下 与 W3C 在 阻止 默认 行为 
与 事件 传播 的 接口 差异 。 


(2) 处 理 正 执行 回调 时 的 顺序 问题 。 


(3) 处 理 正 的 this 的 指向 问题 。 








(4) 没有 平台 检测 代码 ， 因 为 是 使 用 最 通用 
原始 的 onXXX 构 建 。 


(5) 完全 跨 浏 览 器 (包括 IE4 和 NS4) 。 





(6) 使 用 UUID 来 管理 事件 回调 。 
http://dean.edwards.name/weblog/2005/10/add-event/ 


function addEvent(element, type, handler) { 
// 回 调 添 加 UUID， 方 便 移 除 
if (!handler.$$guid) 
handler.$$guid = addEvent.guid++; 
// 元 素 添 加 events， 保 存 所 有 类 型 的 回调 
if (!element.events) 
element.events = {}; 
var handlers = element.events[type]/; 
if (!handlers) { 
// 创 建 一 个 子 对 象 ， 保 存 当 前 类 型 的 回调 
handlers = element.events[type] = {}; 
// 如 果 元 素 之 前 以 onXXX = calLback 的 方式 绑 定 过 事件 ， 则 成 为 当前 类 
别 第 一 个 被 触发 的 回调 
// 问 题 是 这 回调 没有 UUID， 只 能 通过 el ,onXXX = null 移 除 
if (element["on" + type]) { 
handlers[0] = element["on" + type]; 
































} 


} 

// 保 存 当 前 的 回调 

handlers[handler .$$guid] = handler; 
// 所 有 回调 统一 交 由 handleEvent 触 发 
element["on" + type] = handleEvent; 

















} 


addEvent.guid = 1;//UUID 
// 移 除 事件 ， 只 要 从 当前 类 别 的 储存 对 象 delete 就 行 
function removeEvent(element, type, handler) { 
if (element.events && element.events[type]) { 
delete element.events[type] [handler .$$guid]; 











} 
} 
function handleEvent(event) { 
var returnValue = true; 
// 统 一 事件 对 象 阻止 默认 行为 与 事件 传统 的 接口 
event = event || fixEvent(window.event); 
// 根 据 事 件 类 型 ， 取 得 要 处 理 回调 集合 ， 由 于 UUID 是 纯 数 字 ， 因 此 可 以 按照 绑 定 
时 的 顺序 执行 
var handlers = this.events[event.type]; 
for (var iin handlers) { 
this.$$handleEvent = handlers[i]; 
// 根 据 返 回 值 判定 是 否 阻止 冒 泡 
if (this.$$handleEvent(event) === false) { 
returnValue = false; 


















































} 


return returnValue; 


} 
// 对 IE 的 事件 对 象 做 简单 的 修复 


function fixEvent(event) { 
event.preventDefault = fixEvent.preventDefault; 
event.stopPropagation = fixEvent.stopPropagation; 
return event; 





fixEvent.preventDefault = function() { 
this.returnValue = false; 


/ 
fixEvent.stopPropagation = function() { 
this.cancelBubble = true; 





不 过 在 Dean Edward} M CAI PE eB at BY LA 





看 到 许多 指正 与 有 用 的 patch。 比 如 说 ， 既 然 所 有 的 
修正 都 冲 看 正 去 ， 那 么 标准 浏览 右 直 接 使 用 
addEventListener 束 行 。 有 的 还 提 到 在 iframe 中 点 击 
事件 时 ， 事 件 对 象 不 对 的 问题 ， 提 交 以 下 有 用 补 


event = event || fixEvent(((this.ownerDocument || this.document 
|| this).parentWindow || window).event); 








其 中 第 54 条 回复 ， 直 接 导 致 了 jQuery 数据 缓存 


WI ARTA AE. Ay TAE | FA EA A At 
漏 ， 建 议 元 素 就 分 配 一 个 UUID， 所 有 回调 都 放 到 
一 个 对 象 中 储存 。 


function addEvent(element, type, handler) { 
if (!handler.$$guid) 
handler.$$guid = addEvent.guid++; 
// 每 个 元 素 都 分 配 一 个 UUID， 用 于 访问 它们 的 所 有 回调 
if (!element.$$guid) 
element.$$guid = addEvent.guid++; 
if (!addEvent.handlers[element .$$guid ] ) 
addEvent.handlers[element.$$guid] = {}; 
// 每 个 元 素 的 回调 都 分 类 储存 在 不 同 的 hash 中 
var handlers = addEvent.handlers[element.$$guid][type]; 
if (!handlers) { 
handlers = addEvent.handlers[element.$$guid][type] = {} 























if (element["on" + type]) { 
handlers[0] = element["on" + type]; 


} 
handlers[handler.$$guid] = handler; 
element["on" + type] = handleEvent; 


addEvent.guid = 1; 
// 放置 所 有 回调 的 仓库 
addEvent.handlers = {}; 








{ELBA a AY A PEAS, 18 FS A Ton XX X FEIE FF 
在 不 可 消 弥 的 内 存 泄 漏 。 因 此 你 翻 看 jQuery 早期 的 
版 本 ，1.01 版 本 是 照抄 Dean Edward, M1.1.3.1hK 


本 开始 吸收 上 面 提 到 的 第 54 条 回复 的 建议 ， 元 系 只 
分 配 一 个 UUID， 回 调集 中 储 放 的 方式 了 ， 并 使 用 
attachEvent/remove EventListener 绑 定 事件 每 个 
元 素 只 绑 定 一 次 ， 然 后 所 有 回调 都 在 类 似 
handleEvent 的 函数 中 调用 。 不 过 这 是 后 话 ， 无 损 
Dean Edward 的 光辉 形象 ， 他 的 addEvent 在 当时 可 是 
有 着 划时代 的 音义 。 无 入 侵 式 JavaScript 只 有 在 这 样 
刍 壮 的 事件 系统 出 现 后 才能 得 到 迅猛 发 展 。 








10.7 jQuery 的 事件 系统 


jQuery 的 事件 模块 有 发端 于 Dean Edward 的 
addEvent， 然 后 它 不 断 吸收 社 区 的 插件 与 补丁 ， 发 
展 成 为 非常 成 熟 的 事件 系统 。 其 中 不 得 不 提 的 是 其 
事件 代理 与 事件 派发 机 制 |。 





早 在 2007 年 ，Brandon Aaron 为 jQuery 写 了 一 个 
划时代 的 插件 叫 livequery， 它 可 以 监听 后 来 插入 的 
元 系 的 事件 。 比 如 ， 一 个 表格 ， 我 们 为 tr 元 素 绑 定 
mouseover/mouseout 事 件 时 ， 只 有 十 行 ， 然 后 我 们 
又 动态 添加 了 20 行 ， 这 20 个 tr 元 素 也 同样 能 执行 
mouseovermouseout 回 调 。 魔 术 在 于 ， 它 并 没有 把 
事件 侦探 锋线 定 在 tr 元 素 上 ， 而 是 绑 定 最 顶层 的 
document 上 ， 然 后 通过 事件 冒 泡 ， 取 得 事件 源 ， 判 
定 它 是 否 匹 配 用 户 给 定 的 CSS 表 达 式 ， 才 执行 用 户 
回调 。 

















如 果 一 个 表格 有 100 个 tr 元 素 ， 每 个 都 要 绑 定 

mouseover/mouseout 事 件 ， 改 成 事件 代理 的 方式 ， 
可 以 节 和 省 99 次 绑 定 ， 这 优化 很 好 ， 更 何况 它 能 监 昕 
将 来 添加 的 元 素 ， 因 此 立马 被 吸收 到 jQuery1.3 中 
去 ， 成 为 它 的 live 方 法 。 再 把 一 些 明 显 的 bpug 修 复 
了 ，jQuery1.32 成 为 受 欢 迎 的 版 本 ， 与 后 来 的 
jQuery1.42 都 是 里 程 碑 式 ! 不 过 话说 回来 ，live 方 法 

需要 对 菏 些 不 冒 泡 的 事件 做 些 处 理 ， 比 如 一 些 表单 
事件 ， 有 的 只 冒 泡 到 form， 有 的 冒 泡 到 document， 
有 的 压根 不 冒 ， 如 表 10-1 所 示 。 














表 10-1 


fame ma [ee om le | | 


click document document document document document document 
































Xj + focus. blur, change. submit. reset. 
select 等 不 会 骨 泡 的 事件 ， 在 标准 浏览 器 中 ， 我 们 可 
以 设置 addEventListener 的 最 后 一 个 参数 为 true 轻 松 





feo TEMA ARIS, 22Adfocusin(t # focus, 
focusout{t blur, selectstart{t # selecte change, 
submit 与 reset 就 复杂 了 ， 必 须 利 用 其 他 事件 来 模 
拟 ， 还 要 判断 事件 源 的 类 型 ，selectedIndex、 
keyCode 等 相关 属性 ， 这 课题 最 后 由 一 个 叫 reglib 的 
库 搞 定 。reglib 的 作者 还 写 了 一 篇 很 著名 的 博文 
«Goodbye mouseover, hello mouseenter》， 来 推广 
微软 系 的 两 个 事件 mouseenter 与 nouseleave。 正 如 
你 们 今天 看 到 那样 ，jQuery 全 面 接纳 了 它们 。 





live 方 法 市 来 的 全 新 体验 是 空前 的 ， 但 毕竟 要 
冒 泡 到 最 顶层 ， 对 下 还 是 有 点 坎坷 ， 有 时 还 会 失 
灵 。 最 好 能 指定 父 闻 把， 一 个 绑 定 时 已 经 存在 的 父 








节点 ， 这 样 就 不 用 费力 了 。 当 时 有 3 篇 博文 提出 相 
近 的 方案 ， 它 们 给 出 的 接口 一 篇 比 一 扁 接近 John 
Resig 接 纳 的 方案 。 


比如 最 后 那 篇 博文 ， 它 已 经 是 这 个 样子 : 


$("div").delegate( 'click', 'span', function( event ){ 
$( this ).toggleClass('selected'); 
return false; 


}); 








并 提出 对 应 解除 代理 的 API 一 一 undelegate。 而 
jQuery1.42 在 2010 年 2 月 19 日 推出 时 ， 也 是 这 两 个 接 
口 ， 前 两 个 参数 只 调换 一 下 : 
$("div").delegate( "span","click", function( event ){ 


$( this ).toggleClass('selected'); 
return false; 


}); 








正 所 谓 “ 众 人 拾 某 火焰 高 ”，jQuery 的 强大 不 无 
道理 。 在 jQuery 1.8 中 ， 它 又 吸收 dperini / nwevents 


的 点 子 ， 改 进 其 事件 代理 ， 大 大 提高 代理 性 能 。 


先 看 一 下 其 主要 接口 ， 如 图 10-6 所 示 。 


live 
one 


图 10-6 


其 中 bind、unbind、one、trigger、toggle、 
hover, ready -FRA -o 


tirggerHandler 是 jQuery 1.23 增 加 的 ， 内 部 依赖 
于 trigger， 只 对 当前 匹配 元 素 的 第 一 个 有 效 ， 不 冒 
泡 不 触 皮 默认 行为 。 


live 与 die 是 jQuery 1.3 增 加 的 ， 用 于 事件 代理 ， 
统一 由 document 代 理 。 


delegate 与 Undelegate 是 jQuery 1.421 INÝ], 
许 指 定 代 理 元 素 的 事件 代理 ， 它 内 部 是 利用 live， 
die 实 现 的 。 


on 与 off 是 jQuery 1.7 增 加 的 ， 目 的 是 统一 事件 
接口 。bind、one、1live、delegate 直 接 由 on 衍生 ， 
unbind、die、undelegate 直 接 由 off 衍 生 。 


hover 用 于 模拟 css 的 hover 效 果 ， 内 部 依赖 于 


mouseenter 与 mouseleave- 


ready 可 以 看 作为 load 事 件 的 增强 版 ， 获 取 最 早 
的 DOM 可 用 时 机 后 立即 执行 各 种 DOM 操 作 。 








toggle 是 dlick 的 加 强 版 ， 每 次 点 击 都 执行 不 同 
的 回调 并 切换 到 下 一 个 (jQuery 2.0 被 废弃 ) 。 


trigger 与 triggerHandler 是 jQuery 的 fireEvent 实 
现 。 


此 外 ，jQuery 还 有 25 个 以 事件 类 型 命名 的 快捷 
方法 ， 当 传 参数 个 数 为 2 时 表现 为 绑 定 事件 ， 个 数 
为 0 表现 为 派发 事件 ， 如 图 10-7 所 示 。 





图 10-8 是 jQuery 的 事件 流程 ， 大 家 可 以 稍微 了 
所 二 二 让 和 


jQuery 的 事件 系统 是 前 MVVM 时 代 ， 最 强大 的 
事件 系统 ， 具 有 高 扩展 性 、 高 性 能 、 功 能 丰富 的 优 
点 。 这 个 直到 React 的 事件 系统 出 现 才 被 超越 ， 
MVVM 时 代 的 事件 系统 已 经 倾向 于 内 部 使 用 事件 代 
理 来 绑 定 一 切 事 件 回 调 ， 从 而 获得 更 高 的 性 能 。 





D 
bind 


mousemove mouseup 


图 10-7 


element.on(‘click', 'p', function(){}) 


jQuery.fn.on 


Ly 给 选中 元 素 注 册 
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图 10-8 
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avalon2 的 事件 系统 最 代表 未 来 的 友 展 方 回 ， 企 
图 通过 事件 代理 绑 定 一 切 可 能 的 事件 。 它 的 两 个 基 
础 方法 与 jQuery 一 样 ， 分 别 叫 做 bind、unbind， 里 
面 也 采取 之 前 cssSHooks、valHooks 一 样 的 钩子 对 象 
RT NT EAS TE fa el. (ANIA, ELEH T RT 
Nil]. FEavalon PULA SIS IA AE ABA. 
因此 这 个 缓存 系 统 只 是 一 个 普通 的 javascript 对 象 ， 
但 够 用 就 可 以 了 。 此 外 ， 还 有 UUID 系 统 ， 但 只 用 
于 元 素 节 点 ， 我 们 是 通过 setAttribute 来 添加 的 ， 因 
此 没有 对 付 ember、object、avalon 的 事件 系统 主要 
由 avalon.bind、avalon.ubind 这 两 个 方法 组 成 。 先 说 
avalon.bind， 它 与 业界 常见 的 addEvent 方 法 一 样 ， 
拥有 3 个 参数 。 











(1) el: 绑 定 事件 的 对 象 。 


(2) type: 事件 的 闫 型 ， 可 以 是 目 定义 事件 。 


(3) fn: 事件 回调 ， 第 一 个 参数 总 是 事件 对 
象 ， 并 且 拥 有 type 与 target 属 性 。 


然后 avalon 拥 有 3 个 专门 辅助 事件 系统 的 对 象 
CRURA) ， 用 于 修正 最 初 传 入 的 事件 名 ， 回 调 
及 存放 地 点 。 





(1) bubbleEvents: 存储 所 有 能 冒 泡 的 事件 类 
型 ， 并 有 日 针对 不 同 浏览 器 有 所 增删 ， 键 名 为 事件 
名 ， 值 为 true。 





(2) eventHooks:: 用 于 处 理 特殊 事件 ， 键 名 
为 事件 名 ， 值 为 一 个 钩子 图 数 ， 要 求 将 初始 参数 传 
进去 ， 最 后 返回 一 个 新 回调 。 比 如 滚轮 ， 
mouseenter/leave 等 难 缠 的 事件 就 需要 在 钩子 方法 中 
处 理 。 








(3) eventListeners: 存放 回调 函数 ， 如 果 原 


事件 是 命中 eventHooks， 那 么 存放 的 是 新 回调 。 键 
名 是 uuid， 它 位 于 回调 的 上 面 。 








然后 将 事件 名 十 uuid 和 存放 到 元 素 市 点 的 avalon- 
events 属 性 中 ， 以 喜 号 隔 开 。 如 采 此 事件 能 骨 泡 ， 
那么 也 在 html 的 delegate-events 属 性 值 中 加 上 对 应 事 
件 名 ， 如 图 10-9 所 示 。 





vee ae a -一 一 











key=typetfn.uuid 
el.setAttribute("avalon-events", key) 


O L] 
uuid=fn.uuid ||getUUID() 
eventListeners [uuid]=fn 
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delegateEvent 


图 10-9 


最 后 根据 事件 能 否 冒 泡 ， 决 定 将 回调 绑 定 到 根 
节点 还 是 当前 元 素 上 。 


var canBubbleUp = avalon.bubbleEvents = require('./bubbleEvents 


本 


if (!w3c) { 
delete canBubbleUp.change 
delete canBubbleUp.select 
} 
var uuid = 
var eventHooks = avalon.eventHooks 
var focusBlur = { 
focus: true, 
blur: true 








} 
/* 绑 定 事件 */ 
avalon.bind = function (elem, type, fn) { 
if (elem.nodeType === 1) { 
var value = elem.getAttribute('avalon-events') || '' 
var uuid = fn.uuid || (fn.uuid = ++uuid) 
var hook = eventHooks[type] 
if (hook) { 


type = hook.type || type 
if (hook.fix) { 
fn = hook. fix(elem, fn) 
fn.uuid = uuid 
} 
} 
var key = type + ':' + uuid 
avalon.eventListeners[fn.uuid] = fn 
if (value.indexOf(type + ':') === -1) { 
// 同 一 种 事件 只 绑 定 一 次 
// 对 于 能 冒 泡 的 事件 ， 或 现代 浏览 器 下 的 focus，blur 事 件 使 用 事件 代理 
// 因 为 现代 浏览 器 可 以 使 用 事件 捕获 方法 监听 事件 
if (canBubbleUp[type] || (avalon.modern && focusBlu 
r[type])) { 















































delegateEvent (type) 
} else { 
nativeBind(elem, type, dispatch) 
} 
} 
var keys = value.split(',') 
if (keys[0] === '') { 
keys.shift() 
} 
if (keys.indexOf(key) === -1) { 


keys.push(key) 
elem.setAttribute('avalon-events', keys.join(',')) 
// 将 令 牌 放 进 avalon-events 属 性 中 





} 


} else { 
nativeBind(elem, type, fn) 

















} 
return fn // 兼 容 之 前 的 版 本 








nativeBind 束 是 本 章 最 开始 的 addEvent， 只 是 对 
attachEvent 与 addEventListener 进 行 简单 的 封装 。 


function delegateEvent(type) { 
var value = root.getAttribute('delegate-events') || '' 
if (value.indexOf(type) === -1) { 
var arr = value.match(avalon.rword) || [] 
arr.push(type) 
root.setAttribute('delegate-events', arr.join(',')) 


nativeBind(root, type, dispatch, !!focusBlur[type] ) 
} 


} 





delegeteEvent 内 部 也 是 调用 dispatch 事 件 ， 只 是 
TEAVE HE ATRAIR TI A o 
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C1) 对 原生 事件 对 象 进行 再 封 疾 ， 解 决 事件 





对 象 的 方法 名 与 属性 名 不 一 致 问 题 ， 并 且 针 对 茶 些 
特殊 事件 (比如 IE 有 Chrome 没 有 的 
mouseenter/leave 事件 和 Firefox 不 支持 的 
mousewheel 事件 ) ， 我 们 在 这 里 事件 冒充 CH 


mouseover 事 件 骨 充 mouseenter 事 件 ) 


(2) 通过 event.target 得 到 事件 源 对 象 ， 从 而 访 
问 到 avalon-events 属 性 值 ， 然 后 根据 event.type 得 到 
所 有 相对 UUID， 再 从 eventListeners 得 到 回调 。 这 
些 步 又 通过 collectHandlers 私 有 方法 处 理 。 


(3) 遇 历 所 有 回调 ， 根 据 事 件 冒 泡 与 事件 返 
回 值 ， 设 置 一 些 分 文 ， 实 现 stopPropagation 与 
stopImmediatePropagation (如 图 10-10 和 图 10-11 所 
A 









广 event=new avEvent(event) : 触发 事件 阶段 | 
| 
| 
| 

J 


— type=event.type 
avalon-events 
属性 
el=event.target 
fn=eventL isteners[uuid] 一 一 


J 


事件 化 事件 对 象 









| 
‘7, to 
| 


分 解 属性 得 到 uuid 
type 能 冒 泡 ， 收 集 
父 节点 的 el，type.fn 





递归 ， 一 直 收 到 html 元 素 
依次 执行 所 有 fn 


图 10-10 





var typeRegExp = {} 
function collectHandlers(elem, type, handlers) { 
var value = elem.getAttribute('avalon-events' ) 
if (value && (elem.disabled !== true || type !== 'click')) 


var uuids = [] 
var reg = typeRegExp[type] || (typeRegExp[type] = new R 
egExp("\\b"+type + '\\:([4,\\s]+)', 'g')) 
value.replace(reg, function (a, b) { 
uuids.push(b) 
return a 
}) 
if (uuids.length) { 
handlers. push({ 
elem: elem, 
uuids: uuids 


}) 


} 


elem = elem.parentNode 
if (elem && elem.getAttribute && canBubbleUp[type]) { 
collectHandlers(elem, type, handlers) 
} 
} 
function dispatch(event) { 
event = new avEvent(event ) 
var type = event.type 
var elem = event.target 
var handlers = [] 
collectHandlers(elem, type, handlers) 
var 1 = 0, j, uuid, handler 
// 这 里 会 模拟 整个 冒 泡 过 程 及 当 用 户 在 回调 里 调用 了 stopPropagation 与 stop 
ImmediatePropagation // 方 法 时 ， 会 改变 事件 的 cancelBubble、isImmediat 
ePropagationStopped 属 性 ， 如 何 中 断 冒 泡 的 
while ((handler = handlers[i++]) && !event.cancelBubble) { 
var host = event.currentTarget = handler.elem 
]j = 9 
while ((uuid = handler.uuids[ j++ ]) && 
!event.isImmediatePropagationStopped) { 











var fn = avalon.eventListeners[uuid] 


if (fn) { 
var ret = fn.call( elem, event) 
if(ret === false){ 


event.preventDefault() 
event.stopPropagation() 








attribute discription 


currentTarget 当前 捕获 节点 的 引用 
pageX | 事件 发 生 点 当前 文档 横 坐标 
pageY ”事件 发 生 点 当前 文档 纵 坐 标 
target 产生 事件 的 节点 引用 
type 当前 事件 类 型 : 如 click. 


roy 


which | 针对 键盘 和 鼠标 事件 ， 这 个 属性 能 确定 你 到 底 按 的 是 哪个 键 或 按钮 。 




























currentTarget 


target 


1. 事件 触发 ， 产 生 event 对 象 ， 往 上 传递 
图 10-11 


于 怎样 标准 化 事件 对 象 ， 所 有 框 染 的 想法 都 
a 束 是 将 srcElement 改 成 target 并 修正 停止 
事件 传播 与 阻止 默认 行为 这 两 个 API， 加 上 
timeStamp 与 originalEvent 属 性 。 像 Opera 与 
Chrome， 它 们 是 同时 文 持 两 套 API。 


function avEvent(event) { 
if (event.originalEvent) { 


return this 
} 
for (var i in event) { 
if (!(ypeof event[i] !== 'function') ){ 
this[i] = event[i]// 不 复制 事件 








} 


} 
if (!this.target) { 
this.target = event.srcElement 
} 
this.timeStamp = new Date() - 0 
this.originalEvent = event 
} 
avEvent.prototype = { 
preventDefault: function () { 
var e = this.originalEvent 
this.returnValue = false 
if (e) { 
e.returnValue = false 
if (e.preventDefault) { 
e.preventDefault() 


I 
j 
tr 


stopPropagation: function () { 
var e = this.originalEvent 
this.cancelBubble = true 
if (e) { 
e.cancelBubble = true 
if (e.stopPropagation) { 
e.stopPropagation( ) 
} 
} 
ty 


stopImmediatePropagation: function () { 
var e = this.originalEvent 
this.isImmediatePropagationStopped = true 
if (e.stopImmediatePropagation) { 
e.stopImmediatePropagation() 


} 
this.stopPropagation() 





我 们 再 看 一 下 如 何 删除 事件 。 由 于 我 们 的 事件 
名 与 回调 都 可 以 在 avalon-events 属性 值 中 得 到 ， 
主要 删 挥 里 面 的 UUID， 那 么 当 点 击 事件 发 生 时 ， 
束 不 会 进入 我 们 的 用 户 回 调 中 。 同 理 ， 如 果 将 事件 
名 删 控 ， 那 么 这 个 元 系 的 所 有 点 击 回 调 就 不 会 触 
发 。 进 一 步 ， 我 们 把 avalon-events 这 个 属性 都 删 
把 ， 所 有 事件 回调 束 不 会 触及 。 当 然 为 节约 内 存 起 
见 ， 最 好 也 把 avalon.eventListeners 中 的 回调 也 删 
挤 ， 这 样 不 用 操作 detachEvent/removeEventListeners 
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avalon.unbind = function (elem, type, fn) { 
if (elem.nodeType === 1) { 
var value = elem.getAttribute('avalon-events') || '' 
switch (arguments.length) { 
case 1: 


nativeUnBind(elem, type, dispatch) 
elem.removeAttribute('avalon-events' ) 


break 

case 2: 
value = value.split(',').filter(function (str) 

{ 
return str.indexOf(type + ':') === -1 

}).join(',') 
elem.setAttribute('avalon-events', value) 
break 

default: 


var search = type + ':' + fn.uuid 


value = value.split(',').filter(function (str) 


return str !== search 
$).join(',') 
elem.setAttribute('avalon-events', value) 
delete avalon.eventListeners[fn.uuid ] 
break 


} 
} else { 
nativeUnBind(elem, type, fn) 


} 





10.9 总结 





事件 是 我 们 与 页 面 区 互 的 重要 渠道 ， 因 此 浏览 
abe tt S HRW H REREH, PR Se 
种 事件 是 一 个 局 级 JSer 的 标 过。 虽然 事件 存在 巨大 
的 莽 寞 性 ， 但 经 过 先 人 的 否 斗 ， 最 终 提 炼 出 了 现在 
这 种 基于 UUID 的 事件 系统 解决 方案 ， 而 为 了 提高 
性 能 ， 又 发 明了 事件 代理 这 套 机 制 。UUID 十 事件 
代理 ， 必 将 成 为 MVVM 实 现 事 件 绑 定 的 主流 方式 。 





最 后 ， 重 要 的 事 说 3 次 。 事 件 系统 必须 有 
UUID! 必须 有 UUID! 必须 有 UUID! 有 了 UUID， 
以 后 手动 触发 事件 或 删除 事件 ， 就 可 以 绕 过 浏览 器 
的 那些 繁杂 琐碎 的 API 了 。 由 于 浏览 器 的 删除 事件 
必须 传 入 原来 的 回调 ， 因 此 对 不 注意 保存 引用 的 普 
通 前 问 来 说 ， 这 个 以 后 删除 几乎 不 可 能 。 而 手动 触 
发 事件 ， 光 是 几 十 initXXXEvent，createEvent 的 组 
合 就 摘 军 你 了 。 这 也 是 本 草 直 接 包 略 如 何 手 动 触 用 


事件 的 原因 。 
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一 个 可 用 的 事件 。 完 其 原因 ， 是 由 于 最 早 在 移动 辛 
发 迹 的 iOS 给 我 们 带 来 各 种 各 样 的 奇 酝 bug 或 怪异 设 
定 ， 安 里 也 无 脑 照抄 但 又 抄 不 好 ， 以 致 于 市 来 更 多 
bug. 





最 大 的 难题 : 触 屏 交互 300ms 延 迟 。 在 2007 年 
苹果 准备 发 布 首 蒜 iPhone 时 ， 他 们 的 工程 师 需 要 解 
决 如 何 让 用 户 在 手机 上 浏览 那些 为 PC 大 屏幕 设备 而 
设计 的 网 页 ， 那 时 候 的 网 页 并 没有 响应 式 设 计 ， 并 
且 都 是 使 用 px 作为 字体 和 元 素 尺 寸 的 单位 。 因 此 用 
户 在 使 用 iPhone 浏 览 网 页 时 体验 非常 糟糕 ， 不 是 字 
体 过 小 ， 就 是 页 面 只 显示 一 部 分 。 于 是 苹果 工程 师 
想到 了 一 个 办 法 ， 那 就 是 如 今 大 家 习 以 为 向 的 双击 
放大 页 面 ， 再 次 双击 恢复 页 面 功能 。 有 了 这 个 设计 
之 后 ，PC 端 的 dblclick 事 件 被 废除 掉 了 。 





























网 页 中 难免 有 大 量 链接 ， 如 果 我 们 在 移动 设备 
中 访问 网 页 时 点 击 到 某 个 链接 ， 如 何 区 分 用 户 是 想 
打开 该 链接 还 是 放大 页 面 呢 ? 而 且 移动 设备 屏幕 较 
小 ， 容 易 出 现 误 操作 。 因 此 苹果 工程 师 就 想到 让 所 
有 的 点 击 事件 延迟 一 下 ， 以 判断 用 户 是 否 再 次 点 击 
屏幕 来 判断 用 户 的 操作 。 不 过 ， 这 个 处 理 方式 只 是 
为 了 方便 开发 者 ， 完 全 没有 考虑 到 用 户 的 感受 。 并 














且 随 着 啊 应 式 设 置 的 流行 ， 我 们 完全 可 以 在 设计 之 
初 就 避免 上 述 误 点 击 的 问题 。 因 此 ， 旧 有 的 点 击 延 
述 便 成 为 众 天 之 的 ， 第 一 个 针对 此 问题 的 库 束 十 
faskclick. 





此 外 ， 智 能 手机 上 的 交互 基本 上 是 通过 手指 
Atouch 进 行 的 ， 要 用 一 个 手指 或 多 个 手指 的 动作 来 
表述 自己 的 意见 ， 显 然 不 能 只 靠 点 击 ， 于 是 出 现 了 
划 动 Cswipe) 、 拖 动 (drag) 、 缩 放 (pinch) 。 
由 于 点 击 事件 不 可 用 ， 于 是 人 们 捅 出 一 个 同 义 事件 
tap。 本 章 主要 围绕 这 几 种 事件 展开 。 

















avalon 的 事件 系统 基本 上 是 以 iO0S 手 势 事 件 为 鉴 
本 改进 而 来 . 其 中 由 于 tap 事 件 需 要 大 费 周 曹 的 模拟 
PC 上 的 点 击 效果 ， 因 此 独立 出 来 。 


本 章 介 绍 到 的 源 代码 都 可 以 在 以 下 链接 找到 ; 


https://github.com/RubyLouvre/avalon2/tree/master/src 
https://github.com/RubyLouvre/avalon2/tree/master/component/ges 
ture 


11.1 touch 系 事件 





在 移动 并 上 许多 事件 都 是 使 用 这 两 种 事件 合成 
出 来 的 ， 包 含 iOS2.0 软 件 的 iPhone 3G 发 布 时 ， 也 包 
舍 了 一 个 新 版 本 的 Safari 浏 览 堪 。 


该 移动 版 Safari 近 供 了 一 些 与 触摸 Crouch) 操 
作 相 关 的 新 事件 。 后 来 ，Android 上 的 浏览 器 也 实 
现 了 相同 的 事件 。 和 触摸 事件 会 在 用 户 手指 放 在 屏 尹 
上 面 时 、 在 屏幕 上 滑动 时 或 从 屏幕 上 移 开 时 触发 。 
具体 来 说 ， 有 以 下 几 个 触摸 事件 。 











e touchstart: 一 根 或 多 根 手 指 开始 触摸 屏幕 时 人 触 
发 。 

。touchmove: 一 根 或 多 根 手指 在 屏 大 上 移动 时 触 
发 。 在 这 个 事件 友 生 期 间 ， 调 用 preventDefault() 
可 阻止 滚动 及 文字 选中 。 

。touchend: “ta hear LAS ITIN ARK 





e touchcancel: 触摸 意外 取消 时 触 友 。 比 如 你 一 
长 按 不 动 ， 或 者 手指 划 出 屏 厅 ， 或 者 触摸 过 程 
中 打 入 电话 ， 系 统 就 会 自动 调度 此 事件 。 





上 面 这 几 个 事件 都 会 冒 泡 ， 也 都 可 以 取消 。 虽 
然 这 些 触摸 事件 没有 在 DOM 规 范 中 定义 ， 但 它们 
却 是 以 兼容 DOM 的 方式 实现 的 。 因 此 ， 每 个 触摸 
事件 的 event 对 象 都 提供 了 在 鼠标 事件 中 第 见 的 属 
性 : bubbles、cancelable、view、detail、altKey、 
shiftKey、ctrIKey 和 metaKey， 但 你 会 发 现 所 有 表示 
坐标 的 属性 不 匈 了 ， 如 图 11-1 所 示 。 











这 些 举 标 属 性 被 放 到 一 个 叫 Touch 的 对 象 上 ， 
而 它们 又 分 属于 touches、targetTouches、 
changeTouches 对 象 上 。 


e touches: 当前 屏幕 上 所 有 触摸 点 列表 。 
e targetTouches: 绑 定 事件 的 元 素 节 点 或 对 象 上 的 
所 有 触摸 点 列表 。 














changeTouches: 绑 定 事件 的 元 素 贡 点 或 对 象 上 
及 生 了 改变 的 触 措 点 列表 。 


每 个 Touch 对 象 包含 下 列 属性 。 


clientX: 触摸 目标 在 视 口 中 的 x 坐标 。 

clientY: 触摸 目标 在 视 口中 的 y 坐 标 。 

identifier: 表示 触摸 的 唯一 ID。 

pageX: 触摸 目标 在 页 面 中 的 x 坐标 。 

pageY: 触摸 日 标 在 页 面 中 的 y 坐 标 。 

screenX: 触摸 日 标 在 屏 硕 中 的 x 坐标 。 

screenY: 触摸 目标 在 屏幕 中 的 y 坐 标 。 

target: 触摸 的 DOM 闻 点 坐标 。 

在 一 些 新 浏览 器 ，Touch 对 象 甚至 包括 了 它们 的 
移动 距离 ， 旋 转角 上 度 如 图 11-2 所 示 。 


























v TouchEvent {} 站 

altKey: false 
bubbles: true 
cancelBubble: false 
cancelable: true 

>» changedTouches: TouchList 
charCode: 0 
ctrlKey: false 
currentTarget: null 
defaultPrevented: false 
detail: 0 
eventPhase: 0 
keyCode: 0 
metaKey: false 

> path: Array [6] 
returnValue: true 
shiftKey: false 

> srcElement: div.doubletap 

> target: div.doubletap 

> targetTouches: TouchList 
timeStamp: 1444024572139 

> touches: TouchList 
type: "touchstart" 

> view: Window 
which: 0 

> proto: TouchEvent 


图 11-1 


v0: Touch 

clientX: 323 
clientY: 295 
force: 1 
identifier: 0 
pageX: 323 
pageY: 295 
radiusX: 11.5 
radiusY: 11.5 
rotationAngle: 0 
screenX: 375 
screenY: 474 

> target: div.swipeup 
webkitForce: 1 
webkitRadiusX: 11.5 
webkitRadiusY: 11.5 
webkitRotationAng Le: 


图 11-2 


值得 注意 的 是 ， 如 采 我 们 想 获 取 触 措 点 的 信 
妃 ， 最 好 一 直 使 用 changeTouches， 并 且 在 touchend 
事件 中 touches 及 targetTouches 的 长 度 为 零 。 


从 行为 上 来 看 ，touch 事 件 与 鼠标 事件 非 第 相 
似 ， 当 我 们 后 击 茶 一 个 元 素 时 ， 它 们 几乎 都 会 同时 
发 生 ， 其 执行 顺序 如 下 。 


(1) touchstart. 
(2) mouseover. 
(3) mousemove. 
(4) mousedown. 
(5) mouseup. 
(6) click. 


(7) touchend. 





SPA MDA AN — ERNA, PG tT AT HE AS PEE Td ve EL, 
IE6 更 让 人 头痛 ， 我 只 能 保证 touchstart、 
mousedown, mouseup, 、click 这 4 个 的 顺序 。 在 一 些 
不 文 持 touch 事 件 的 浏览 器 上 ， 有 的 库 想 用 鼠标 事件 
来 模拟 各 种 触 屏 事件 ， 其 实 这 样 做 非常 不 好 。 肯 先 
Bop Se AE Me VETS, RTCA PET & TR 








网 上 提供 关于 touch 事 件 与 鼠标 事件 的 比较 ， 如 
图 11-3 所 示 。 





响应 速度 


mouseup 
mouseclick 
mousedown 
touchend 


touchstart | 
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图 11-3 


其 实 不 支持 touch 事 件 的 浏览 器 也 只 有 winphone 
下 的 下 而 已 ， 我 们 可 以 通过 表 11-1 所 示 的 两 组 事件 
与 touch 事 件 对 应 起 来 。 





表 11-1 


IE9-10 MSPointerDown MSPointerMove MSPointerUp | MSPointerCancel 








p 


模拟 事件 mousedown mousemove mouseup 





11.2 gesture 43 (+ 


iOS 2.0 中 的 Safari 还 引入 了 一 组 手势 事件 。 当 
两 个 手指 触摸 屏 舌 时 就 会 产生 手势 ， 手 势 通 常会 改 
变 显 示 项 的 大 小 ， 或 者 旋转 显示 项 。 有 3 个 手势 事 
fF, OPA Fe 


(1) gesturestart: #4 —A F CAJE SEE 
上 和 面 时 ， 为 一 个 手指 也 触摸 屏蔽 时 触发 。 


(2) gesturechange : 当 触 摸 屏 和希 的 任何 一 个 
手指 的 位 置 友 生变 化 时 ， 触 友 。 





(3) gestureend : 当 任 何 一 个 手指 从 屏 
面 移 开 时 ， 触 发 。 


只 有 两 个 手指 都 触 质 到 屏 膜 的 接收 容 喜 时 才 会 
触及 这 些 事件 。 在 一 个 元 素 上 设置 事件 处 理 程序 ， 
意味 着 两 个 手指 必须 同时 位 于 该 元 素 的 范围 之 内 ， 











A REAL REABTE CLT CA wie APD) 。 由 于 这 
些 事件 冒 泡 ， 所 以 将 事件 处 理 程序 放 在 文档 上 也 可 
以 处 理 所 有 手势 事件 。 些 时， 事件 的 目标 就 是 两 个 
手指 都 位 于 其 范围 内 的 那个 元 素 。 





触 措 事 件 和 手势 事件 之 间 存 在 茶 种 关系 。 当 一 
个 手指 放 在 屏 帮 上 时 ， 会 触发 touchstart 事 件 。 如 果 
另 一 个 手指 又 放 在 了 屏幕 上 ， 则 会 先 触 用 
gesturestart 事 件 。 如 采 另 一 个 手指 又 放 在 了 屏 尹 
上 ， 则 会 先 触发 gesturestart 事 件 ， 随 后 触发 基于 该 
手指 的 touchstart 事 件 。 如 果 一 个 或 两 个 手指 在 屏幕 
上 滑动 ， 将 会 触发 gesturechange 事 件 ， 但 只 要 有 一 
个 手指 移 开 ， 束 会 触发 gestureend 事 件 ， 紧 接着 又 
会 触发 基于 该 手指 的 touchend 事 件 。 








与 触摸 事件 一 样 ， 每 个 手势 事件 的 event 对 象 都 
包含 着 标准 的 鼠标 事件 属性 : bubbles, 


cancelable. view. clientX. clientY、 screenX、 


screenY. detail. altKey. shiftKey. ctrlKey#l 
metaKey。 此 外 ， 还 包含 两 个 额外 的 属性 : rotation 
和 scale。 其 中 ，rotation 属 性 表示 手指 变化 引起 的 旋 
转角 上 度 ， 负 值 表 示 逆 时 针 旋 转 ， 正 值 表 示 有 顺 时 针 旋 
转 《〈 该 值 从 0 开始 ) 。 而 scale 属 性 表示 两 个 手指 间 
距 的 变化 情况 《〈 例 如同 内 收缩 会 缩短 距离 ) ， 这 个 
值 从 1 开始 ， 并 随 距 离 拉 大 而 增长 ， 随 距离 缩减 而 
减 小 。 





下 面 是 使 用 手势 事件 的 一 个 示例 。 





function handleGestureEvent(event) { 
var output = document.getElementById("output"); 
switch(event.type) { 
case "gesturestart": 
output.innerHTML = "Gesture started (rotation=" + e 
vent.ratation +",scale=" 
+ event.scale + ")"; 
break; 
case "gestureend": 
output.innerHTML += "<br>Gesture ended (rotation+" 
+ event.rotation + 
", scale=" + event.scale + ")"; 
break; 
case "gesturechange": 
output.innerHTML += "<br>Gesture changed (rotation+ 
=" + event.rotation + 
", scale+" + event.scale + ")"; 
break; 


} 


document .addEventListener("gesturestart", handleGestureEvent, f 
alse); 

document .addEventListener("gestureend", handleGestureEvent, fal 
se); 

document .addEventListener("gesturechange", handleGestureEvent, 
false); 





Bea FRE — PA bi ai ce SC PL ESE T o 


isIOS = /iP(ad|hone|od)/.test(navigator.userAgent ) 
IE11touch = navigator.pointerEnabled 
IE9_10touch = navigator .msPointerEnabled 
w3ctouch = (function() { 
var supported = isIOS || false 
//http://stackoverf low. com/questions/5713393/creating-a 
nd-firing-touch-events 
//-on-a-touch-enabled-browser 
try { 
var div = document.createElement ("div") 
div.ontouchstart = function() { 
supported = true 
} 
var e = document.createEvent("TouchEvent") 
e.initUIEvent("touchstart", true, true) 
div.dispatchEvent(e) 
} catch (err) { 
} 
div = div.ontouchstart = null 
return supported 


})() 
var touchSupported = !!(w3ctouch || IE11touch || IE9_10touch) 





11.3 tap 系 事件 


tap 事 件 完全 是 因为 那 300ms 延 迟 催生 出 来 的 产 
物 。PC 上 点 击 事件 拥有 的 类 型 与 效果 ， 它 也 应 该 全 
部 拥有 。 比 如 说 ， 点 击 事件 分 单 击 (click) 、 双 击 
(dblclick) ， 这 个 也 分 单 击 (tap) 、 双 击 
(double) 。 此 外 ， 还 存在 一 种 叫 长 按 (hold 或 
longtap) 的 事件 。 毕 葛 双 击 在 移动 器 有 特殊 任务 在 
身 ， 于 是 许多 双击 的 任务 转交 给 长 按 了 。 





点 击 事 件 在 上 传 域 上 点 击 ， 会 弹出 上 传 炉 单 ; 
如 果 人 到 label 元 素 时 ， 会 让 其 for 属 性 对 应 的 目标 元 
素 选 中 ;点 击 提 交 按 钮 时 ， 会 提交 表单 。 a 
为 ， 使 用 模拟 出 来 的 tap 事 件 是 无 法 实现 的 ， 这 时 ， 
我 们 需要 手动 创建 一 个 真正 的 click 或 mousedown 事 
件 ， 来 实现 这 些 效果 。 还 有 要 和 忽 ne 
的 无 效 点 击 事件 ， 阻 止 不 想 要 的 放大 效果 。 
切 ， 在 著名 的 fastdlick 中 都 总 结 好 了 ， a 




















人 在 实现 tap 事 件 时 ， 基 本 遵循 它 的 源码 进行 改 民 。 


说 了 这 么 多 ， 让 我 们 上 代码 吧 。 首 先 要 判定 当 
前 设备 ， 我 们 的 代码 有 许多 分 支 是 针对 不 同 的 版 本 
iOS BK TET FT th TJ 








var ua = navigator.userAgent.toLowerCase() 
//http://stackoverf low. com/questions/9038625/detect -if-device-i 
s-ios 
function iOSversion() { 
if (/iPad|iPhone|iPod/i.test(ua) && !window.MSStream) { 
if ("backdropFilter" in document.documentElement.style) 


return 9 


if (!!window.indexedDB) { 
return 8; 


if (!!window.SpeechSynthesisUtterance) { 
return 7; 


if (!!window.webkitAudioContext) { 
return 6; 


if (!!window.matchMedia) { 
return 5; 


if (!!window.history && 'pushState' in window.history) 


return 4; 


} 


return 3; 


} 


return NaN; 


i 


var deviceIsAndroid = ua.indexOf('android') > 0 
var deviceIsIOS = i0Sversion() 


这 是 来 和 目 overflowstack 的 代码 ， 使 用 特征 侦 测 
来 区 分 1i0S 的 版 本 。 


接 下 来 ， 我 们 需要 对 touchstart、touchmove、 
touchend、touchcancel 进 行 封 装 ， 通 过 监听 整个 触 
摸 流程 ， 然 后 判定 其 中 触摸 点 的 个 数 ， 和 触摸 点 是 否 
发 生 移动 、 移 动 速度 、 移 动 方 同 及 按 下 时 间 每 ， 创 
建 出 tap、swipe、pinch 等 一 系列 自 定义 事件 。 





上 面 的 代码 及 接着 下 来 的 代码 都 是 来 源 于 
avalon。 它 们 都 是 基于 上 一 章 的 avalon 事 件 系 统 。 
由 于 它 非 党 简单 于 便于 移植 ， 大 家 可 以 搬 到 目 己 的 
框架 中 去 。 

















var Recognizer = avalon.Recognizer = { 
pointers: {}, 
start: function (event, callback) { 
for (var i = 0; i < event.changedTouches.length; i++) { 


var touch = event.changedTouches[1i] 

var pointer = { 
startTouch: mixTouchAttr({}, touch), 
startTime: Date.now(), 
status: 'tapping', 


element: event.target 
} 
Recognizer .pointers[touch.identifier] = pointer; 
callback(pointer, touch) 


} 
ty 
move: function (event, callback) { 
for (var i = 0; i < event.changedTouches.length; i++) { 
var touch = event.changedTouches[1i] 
var pointer = Recognizer.pointers[touch. identifier ] 
if (!pointer) { 
return 


J 


if (!("lastTouch" in pointer)) { 
pointer.lastTouch = pointer.startTouch 
pointer.lastTime = pointer.startTime 
pointer.deltaxX = pointer.deltaY = pointer.durat 
ion = pointer.distance = 0 


} 
var time = Date.now() - pointer.lastTime 
if (time > 0) { 


var RECORD_DURATION = 70 
if (time > RECORD_DURATION) { 
time = RECORD_DURATION 


} 
if (pointer.duration + time > RECORD_DURATION) 


pointer.duration = RECORD_DURATION - time 
} 


pointer.duration += time; 
pointer.lastTouch = mixTouchAttr({}, touch) 


pointer.lastTime = Date.now() 


pointer.deltaxX = touch.clientX - pointer.startT 
ouch.clientX 

pointer.deltaY = touch.clientY - pointer.startT 
ouch.clienty 

var x = pointer.deltaX * pointer.deltax 


var y = pointer.deltaY * pointer.deltaY 
pointer.distance = Math.sqrt(x + y) 
pointer.isVertical = !(x > y) 


callback(pointer, touch) 


} 
ty 


end: function (event, callback) { 
for (var i = 0; i < event.changedTouches.length; i++) { 
var touch = event.changedTouches[i], 
id = touch.identifier, 
pointer = Recognizer .pointers[id] 


if (!pointer ) 
continue 


callback(pointer, touch) 


delete Recognizer.pointers[id] 


} 
ty 
fire: function (elem, type, props) { 
if (elem) { 
var event = document.createEvent('Events' ) 
event.initEvent(type, true, true) 
avalon.mix(event, props) 
elem.dispatchEvent(event ) 
} 
ty 


add: function (name, recognizer) { 
function move(event) { 
recognizer .touchmove(event ) 


} 


function end(event) { 
recognizer .touchend(event ) 


document.removeEventListener('touchmove', move) 


document.removeEventListener('touchend', end) 
document. removeEventListener('touchcancel', cancel) 


} 


function cancel(event) { 


recognizer .touchcancel(event ) 
document.removeEventListener('touchmove', move) 
document .removeEventListener('touchend', end) 
document. removeEventListener('touchcancel', cancel) 


} 


recognizer.events.forEach(function (eventName) { 
avalon.eventHooks[eventName] = { 
fn: function (el, fn) { 
if (!el.getAttribute('data-' + name)) { 
el.setAttribute('data-' + name, '1') 
el.addEventListener('touchstart', funct 
ion (event) { 
recognizer.touchstart(event ) 


document .addEventListener ('touchmov 
e', move) 

document .addEventListener('touchend 
', end) 

document ..addEventListener('touchcan 
cel', cancel) 


t) 
J 


return fn 


}) 


var touchkeys = ['screenX', 'screenY', 'clientX', 'clientY', 'p 
ageX', 'pageY'] 


// 复制 touch 对 象 上 的 有 用 属性 到 固定 对 象 上 
function mixTouchAttr(target, source) { 
if (source) { 
touchkeys.forEach(function (key) { 
target[key] = source[key] 














}) 
} 


return target 


从 下 往 上 看 ， 我 们 添加 一 个 系列 的 目 定 义 事件 
是 通过 avalon. Recognizer. add 方 法 实现 的 。 比 如 
说 ，tap 与 click 是 一 个 系列 ，doubletap 与 jongtap 是 一 
个 系列 ，swipeleft、swiperight、swipeup、 
swipedown 是 一 个 系列 .……. 之 所 以 把 tap 与 
doubletap、longtap 分 开 ， 缘 由 有 二 。 一 是 tap 多 是 来 
目 fastdlick 的 源码 ， 而 doubletap、1longtap 则 是 来 目 
zepto、hammer 的 实现 。 二 是 基于 模板 化 及 第 用 与 
B, REM AIT A Wi CAPE AIA ABE. FA 
不 想 加 入 不 太 常 用 的 doubletap、 longtap 。 在 移动 端 
上 ，jQuery 完 全 是 落伍 了 ， 其 官方 出 品 的 jQuery- 
mobile 沦 落 为 二 流产 品 ， 不 过 它 的 一 个 插件 则 非常 
好 用 : 


https://github.com/mattbryson/TouchSwipe - Jquery-Plugin 


add 方 法 的 本 质 是 为 上 一 章 介 绍 的 eventHooks 对 
象 添 加 钓 子 函数 。 钓 子 函 数 内 部 的 组 织 形式 其 实 与 
实现 拖 动 差 不 多 ， 都 是 元 素 上 绑 定 touchstart 事 件 ， 
当 它 被 触发 时 ， 在 全 局 上 添加 touchmove, touchend, 
touchcancel 事 件 。 其 中 这 4 个 事件 再 在 回调 里 面 调用 
各 体系 添加 的 touchstart、touchmove、touchend、 
touchcancel 方 法 。 整 个 add 方 法 的 流程 如 图 11-4 所 
ZN o 





avalon.gestureHooks 


收集 触摸 点 ， 触 发 
自 定义 事件 








图 11-4 


接 下 来 我 们 分 析 一 下 Recognizer 中 其 他 方法 与 
属性 的 含义 。 


pointers 是 放置 触摸 点 的 信息 ， 其 键 名 为 Touch 
对 象 的 identifier 属 性 。 它 里 面包 含 了 触摸 的 时 间 
(startTime) 、 位 置信 息 〈startTouch， 通 过 
mixTouchArr 得 到 ) 、 状 态 (status) 与 事件 源 元 素 
Celement) 。 这 些 数据 在 移动 过 程 还 会 继续 添加 与 
IZE: 


start 方 法 ， 是 用 于 获取 触摸 点 ， 及 执行 对 应 回 
调 。 


move 方 法 ， 是 修正 触摸 点 的 信息 ， 如 采 时 间距 
touchstart 时 间 过 去 了 70ms， 那 么 我 们 束 修 正 
duration、]lastTime、distance、]lastTouch 等 属性 ， 并 
判定 其 是 售 在 垂直 移动 。 不 过 与 直 与 个， 其实 也 不 








太 堆 确 ， 只 是 看 它 在 垂直 方 癌 或 水 平方 同 哪 一 个 移 
动 距离 远 一 些 。 执 行 more 方 法 时 会 执行 相应 回调 。 


end 方 法 ， 主 要 是 清除 触摸 点 及 执行 相应 回 
调 。 

fire 方 法 ， 是 触发 目 定 义 事件 。 这 个 在 上 一 章 
己 经 提 到 了 。 这 里 使 用 了 最 稳 己 的 document. 
createEvent (CEvents') 来 创建 自 定 义 事 件 。 





好 了 ， 有 了 这 主体 框架 ， 我 们 就 可 以 通过 add 
方法 为 它 添加 tap、swipe 等 事件 了 。 我 们 可 以 将 tap 
相关 的 内 容 独立 成 一 个 JS 文件 ， 如 touch.tap.js， 里 
面 组 织 模块 的 形式 可 以 选用 AMD、CMD、 


CommonJS...... 





var supportPointer = !!navigator.pointerEnabled || !!navigator. 
msPointerEnabled 
//root Adocument .documentElement 
if (supportPointer) { // 支持 pointer 的 设备 可 用 样式 来 取消 click 事 件 的 3 
900 毫秒 延迟 

root.style.msTouchAction = root.style.touchAction = 'none' 








var tapRecognizer = { 


events: ['tap', 'click'], 
touchBoundary: 10, 

tapDelay: 200, 

for 

needClick(), 

needFocus(), 

fixTarget() 

focus(), 

updateScrollParent( ) 
touchHasMoved(), 

findControl(), 

findType(), 

sendClick(), 

ut 

touchstart: function (event) {}, 
touchmove: function (event) {}, 
touchend: function (event) {}, 
touchcancel: function () {} 


Recognizer.add("tap", tapRecognizer ) 





如 果 读 过 fastdlick 的 读者 ， 束 会 发 现 其 中 
needClick、 needFocus、findControl、sendClick 与 
fastclick 的 内 部 方法 很 像 。 不 错 ， 本 模块 是 大 量 参 
Æ fastclick4n 5 HJ. touchBoundary# 7s: — fill A 





的 移动 距离 ， 如 果 它 在 某 一 方 同 移动 超过 10px， 我 
们 就 将 它 当 成 其 他 事件 了 。 PE 
SE VIZ AA STRAT TA), Fe Et A 
面 那个 。 


我 们 还 是 顺 着 touchstart、touchmove、 


touchend、touchend 的 顺序 看 起 ， 如 果 其 中 涉及 
他 方法 ， 再 读 那 些 方法 。 





touchstart: function (event) { 

// 忽 略 多 点 触摸 

if (event.targetTouches.length !== 1) { 
return true 





} 
// 修 正事 件 源 对 象 
var targetElement = tapRecognizer.fixTarget(event.target) 
var touch = event.targetTouches[0] 
if (deviceIsIOS) { 
// 判断 是 否 是 点 击 文字 ， 进 行 选 择 等 操作 ， 如 果 是 ， 不 需要 模拟 cLick 
var selection = window.getSelection(); 
if (selection.rangeCount && !selection.isCollapsed) { 
return true 
} 


var id = touch.identifier 
// 当 alert 或 confirm 时 ， 点 击 其 他 地 方 ， 会 触发 touch 事 件 ，iden 











tifier 相 同 ， 此 事件 应 该 被 忽略 


& 





if (id && isFinite(tapRecognizer.lastTouchIdentifier) & 


tapRecognizer.lastTouchIdentifier === id) { 
event.preventDefault() 
return false 


} 


tapRecognizer.lastTouchIdentifier = id 


tapRecognizer .updateScrollParent(targetElement ) 


} 

// 收 集 触 摸 点 的 信息 
tapRecognizer.status = "tapping" 
tapRecognizer.startTime = Date.now() 
tapRecognizer.element = targetElement 
tapRecognizer.pageX = touch.pagex 
tapRecognizer.pageY = touch.pageY 

// 如 果 点 击 太 快 ,阻止 双击 带 来 的 放大 收缩 行为 


if ((tapRecognizer.startTime - tapRecognizer.lastTime) < ta 








pRecognizer.tapDelay) { 
event.preventDefault() 


ty 





touchstart 主 要 是 收集 情报 。 由 于 是 点 击 事件 ， 
因此 我 们 只 处 理 一 个 触摸 点 的 情况 ， 发 现 有 两 个 或 
两 个 以 上 的 指头 在 屏幕 上 ， 应 该 立即 返回 。 然 后 找 











到 正确 的 事件 源 对 象 ， 再 然后 处 理 iOS 上 的 各 种 怪 
事 ， 然 后 往 上 看 一 下 其 和 祖先 元 系 是 否 存 在 深 动 条 ， 
保持 此 祖先 及 深 动 位 置 ， 方 便 以 后 作 比 较 。 最 后 是 
收集 触 措 点 的 相关 信息 与 阻止 双击 。 这 里 面 用 到 两 
个 私有 方法 fixTarget 与 updateScrollParent。 














fixTarget: function (target) { 
if (target.nodeType === 3) { 
return target.parentNode 


if (window.SVGElementInstance && (target instanceof SVGEle 
mentInstance)) { 
return target.correspondingUseElement; 


} 
return target 


ty 
updateScrollParent: function (targetElement) { 

// 如 果 事 件 源 元 素 位 于 某 一 个 有 滚动 条 的 祖父 元 素 中 ,那么 保持 其 scrol11Pare 
nt 与 scrollTop 值 

var scrollParent = targetElement.tapScrollParent 

















if (!scrollParent || !scrollParent.contains(targetElement ) 
) { 
var parentElement = targetElement; 
do { 
if (parentElement.scrollHeight > parentElement.off 
setHeight) { 
scrollParent = parentElement; 
targetElement.tapScrollParent = parentElement 
break; 


parentElement = parentElement.parentElement 
} while (parentElement ); 


} 
if (scrollParent) { 
scrollParent.lastScrollTop = scrollParent.scrollTop 
} 
}, 





touchmove 的 目标 很 单一 ， 判 定 其 是 发 生 移 





动 ， 移 动 了 就 改变 其 状态 ， 消 空 事 件 源 元 素 。 





touchmove: function (event) { 
if (tapRecognizer.status !== "tapping") { 
return true 














} 

// 如 果 事 件 源 元 素 发 生 改 变 , 或 者 发 生 了 移动 , 那么 就 取消 触发 点 击 事件 

if (tapRecognizer.element !== tapRecognizer.fixTarget(event 
.target) || 





tapRecognizer.touchHasMoved(event)) { 
tapRecognizer.status = tapRecognizer.element = 0 
} 
ty 
touchHasMoved: function (event) { 
// 判定 是 否 发 生 移动 , 其 阔 值 是 10px 
var touch = event.changedTouches[0], 
boundary = tapRecognizer .touchBoundary 
return Math.abs(touch.pageX - tapRecognizer.pageX) > boundar 


y |l 








Math.abs(touch.pageY - tapRecognizer.pageY) > boundary 
ty 





其 中 needFocus、needClick、focus、findControl 
方法 是 精华 ， 是 人 们 经 过 千 万 次 调试 总 结 出 来 的 。 





needClick: function (target) { 
// 判 定 是 否 使 用 原生 的 点 击 事 件 ， 和 否则 使 用 sendC1lick 方 法 手动 触发 一 个 人 工 的 
点 击 事件 
Switch (target.nodeName.toLowerCase()) { 
case 'button': 
case 'select': 

















case 'textarea': 
if (target.disabled) { 
return true 


} 


break; 
case 'input': 


// TOS6 pad 上 选择 文件 ， 如 果 不 是 原生 的 click， 弹 出 的 选择 界面 尺寸 





HR 
if ((deviceIsIOS && target.type === 'file') || targ 
et.disabled) { 
return true 


} 


break; 
case 'label': 
case 'iframe': 
case 'video': 
return true 


} 


return false 
ty 
needFocus: function (target) { 
switch (target.nodeName.toLowerCase()) { 
case 'textarea': 





case 'select': // 实 测 android 下 select 也 需要 
return true; 
case 'input': 

Switch (target.type) { 
case 'button': 
case 'checkbox': 
case 'file': 
case 'image': 
case 'radio': 
case 'submit': 

return false 





} 
// 如 果 是 只 读 或 disabled 状 态 , 就 无 须 获 得 焦点 了 
return !target.disabled && !target.readOnly 
default: 
return false 
} 
ty 


focus: function (targetElement) { 
var length; 
// 在 10S7 下 ， 对 一 些 新 表单 元 素 ( 如 date、datetime、time、month) 调 用 fo 
cus 方 法 会 抛 错 ， 
// 境 好 的 是 ,我 们 可 以 改 用 setSelectionRange 获 取 焦 点 ， 将 光标 挪 到 文字 的 
最 后 
var type = targetElement.type 
if (deviceIsIOS && targetElement.setSelectionRange && 
type.indexOf('date') !== © && type !== 'time' && ty 
pe !== 'month') { 
length = targetElement.value.length 
targetElement.setSelectionRange(length, length) 
} else { 
targetElement.focus() 








} 
ty 
findControl: function (labelElement) { 
// 获取 label 元 素 所 对 应 的 表单 元 素 
// 可 以 能 过 control 属 性 ，getElementById， 或 用 querySelector 直 接 找 
其 内 部 第 一 表单 元 素 实现 
if (labelElement.control !== undefined) { 
return labelElement.control 




















} 


if (labelElement.htmlFor) { 
return document.getElementById(labelElement.htmlFor) 
} 


return labelElement.querySelector('button, input:not([type= 
hidden]), keygen, meter, output, progress, select, textarea' ) 


}, 





此 外 还 有 一 个 sendClick 方 法 ， 有 些 时 候 我 们 不 





a he 比如 我 们 点 击 了 submit 
按钮 要 提交 表单 ， 这 是 自 定 义 事件 所 无 能 为 力 的 。 

不 过 有 些 时 候 ， 光 是 click 事 件 又 不 顶 用 ， 需 要 用 到 
mousedown 事 件 ， 于 是 我 们 又 分 化 出 findType 这 个 

MDs 








findType: function (targetElement) { 











// 安 卓 chrome 浏 览 器 上 ， 模 拟 的 click 事件 不 能 让 select 打开 ， 故 使 用 
mousedown 事件 
return deviceIsAndroid && targetElement.tagName.toLowerCase 
() === 'select' ? 
‘mousedown' : 'click' 








ty 
sendClick: function (targetElement, event) { 
// 在 click 之 前 触发 tap 事 件 
Recognizer.fire(targetElement, 'tap', { 
fastclick: true 





}) 
var clickEvent, touch 
// 某 些 安 卓 设备 必 BTS ME 点 ， 之 后 模拟 的 cLick 事 件 才能 让 新 元 素 获 取 焦 点 
if (document. activeElement && document.activeElement !== ta 
rgetElement) { 
document .activeElement.blur() 

















} 


touch = event.changedTouches[0] 





// 手动 触发 点 击 事件 , 此 时 必须 使 用 document . createEvent( 'MouseEvent 
s' ) 来 创建 事件 

// 及 使 用 initMouseEvent 来 初始 化 它 

clickEvent = document.createEvent('MouseEvents' ) 

clickEvent.initMouseEvent(tapRecognizer.findType(targetElem 
ent), true, true, window, 

1, touch.screenx, 

touch.screenY, touch.clientX, touch.clientY, false, false, 
false, false, 0, null) 

clickEvent.fastclick = true 

targetElement .dispatchEvent(clickEvent ) 








ty 





Xy 


最 后 是 touchcancel 方 法 ， 就 是 做 一 些 ; 


att 
Ht 
H 


Ea 


touchcancel: function () { 
tapRecognizer.startTime = tapRecognizer.element = 0 


} 





11.4 press 系 事件 


tap 系 事件 可 谓 最 复杂 ， 为 了 解决 300ms 延 到 而 
伪造 的 点 击 事件 ， pl 切 与 真实 dlick 事 件 相 
关 的 行为 。 但 这 过 去 ， 剩 下 的 路 就 好 走 了 。 


现在 ain nein 如 图 11-5 所 示 。 


A P 


我 们 可 以 使 用 一 个 touch.press.js 文 件 独立 放置 
它 的 代码 ， 由 于 大 量 功 能 使 用 了 Recognizer.start、 
Recognizer.move、Recognizer.end 方 法 进行 复 用 了 ， 
代码 量 比较 少 ， 我 们 就 一 气 呵 成 ， 全 部 贴 上 来 吧 。 





var pressRecognizer = { 


events: ['longtap', 'doubletap'], 
cancelPress: function (pointer) { 
clearTimeout(pointer.pressingHandler ) 
pointer.pressingHandler = null 
ty 
touchstart: function (event) { 
Recognizer.start(event, function (pointer, touch) { 
pointer.pressingHandler = setTimeout(function () { 
if (pointer.status === 'tapping') { 
Recognizer.fire(event.target, 'longtap', { 
touch: touch, touchEvent: event 


}) 
} 
pressRecognizer.cancelPress(pointer ) 
}, 500) 
if (event.changedTouches.length !== 1) { 


pointer.status = 0 


} 
}) 


ty 


touchmove: function (event) { 
Recognizer.move(event, function (pointer) { 
if (pointer.distance > 10 && pointer.pressingHandle 


r) { 
pressRecognizer.cancelPress(pointer ) 
if (pointer.status === 'tapping') { 
pointer.status = 'panning' 
} 
} 
}) 
}, 


touchend: function (event) { 
Recognizer.end(event, function (pointer, touch) { 
pressRecognizer.cancelPress(pointer ) 
if (pointer.status === 'tapping') { 
pointer.lastTime = Date.now() 
if (pressRecognizer.lastTap && pointer.lastTime 
- pressRecognizer. 
lastTap.lastTime < 300) { 
Recognizer.fire(pointer.element, 'doubletap 


touch: touch, 
touchEvent: event 


}) 


} 


pressRecognizer.lastTap = pointer 
}) 
ty 


touchcancel: function (event) { 
Recognizer.end(event, function (pointer) { 
pressRecognizer.cancelPress(pointer ) 
}) 


} 
} 


Recognizer.add('press', pressRecognizer) 








首先 看 长 按 是 怎么 实现 ， 在 touchstart 中 ， 我 们 
默认 每 个 触摸 点 〈pointer) 的 状态 为 tapping， 如 果 








YIN EE i, TAO. EIN Ba Ag 
触摸 点 添加 一 个 setTimeout 回 调 ， 过 期 时 间 为 
500ms， 有 的 库 也 使 用 750ms， 在 它们 之 则 为 受 。 
只 要 在 这 时 则 它 没 有 clearTimeout， 就 会 目 动 触发 
长 按 事 件 。touchmove 回 调 就 是 检测 触摸 点 是 否 发 
生 位 移 ， 发 生 了 就 clearTimeout， 并 改变 状态 。 在 
touchend 中 ， 我 们 也 会 clearTimeout， 说 明 这 个 触摸 
行为 过 短 了。 此 外 ， 还 判定 两 次 触摸 行为 是 否 少 于 


300ms， 是 就 触 友 双击 事件 。 


如 果 大 家 会 avalon， 可 以 使 用 以 下 页 面 进行 训 





<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>touch</title> 
<script src="dist/avalon.mobile.js"></script> 
<meta id="viewport" name="viewport" content="initial-sc 
ale=1.0,user-scalable=no, 
minimum-scale=1.0, maximum-scale=1.0"> 
<style> 
.Longtap{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: rosybrown 


} 

.doubletap{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: gold; 

} 


</style> 
</head> 
<body ms-controller="test"> 


<div class="longtap" ms-on-longtap="press"> 


</div> 

<div class="doubletap" ms-on-doubletap="press"> 
// 双 击 

</div> 


<script type="text/javascript"> 


var vm = avalon.define({ 
$id: "test", 
press: function (e) { 
console. log(e.type) 
this.innerHTML = e.type + " " + (new Date - 
0) 


t) 


</script> 
</body> 
</html> 





注意 ， 在 长 按 过 程 中 ， 可 能 触及 系统 右键 沫 
单 ， 可 以 使 用 以 下 方式 茜 用 掉 。 


element.addEventListener("MSHoldVisual", function(e) { e.preven 
tDefault() }, false) 
element.addEventListener("contextmenu", function(e) { e.prevent 


Default() }, false) 





11.5 ”swipe 系 事件 


swipe 意 即 划 动 ， 要 用 速度 感 ， 因 此 其 限制 条 
件 之 一 是 速度 ， 主 流 的 限制 速度 是 0.65pxms。 此 
外 ， 划 动 只 要 一 个 手指 头 就 够 了 ， 还 有 划 动 要 有 距 
房 。 而 这 所 有 要 素 ， 我 们 已 经 在 Recognizer. start, 
Recognizer. move、Recognizer. end 方 法 进行 复 用 
了 ， 因 此 其 代码 量 也 比较 少 。 最 难 的 古方 同 的 判 
定 ， 要 用 到 一 些 数学 知识 ， 如 图 11-6 所 示 。 
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图 11-6 


我 们 可 以 使 用 一 个 touch.press.js 文 件 独立 放置 
它 的 代码 。 其 主体 结构 如 下 : 





var swipeRecognizer = { 

events: ['swipe', 'swipeleft', 'swiperight', 'swipeup', 'sw 
ipedown'], 

getAngle: function (x, y) { 


var r = Math.atan2(y, x) //radians 
var angle = Math.round(r * 180 / Math.PI) //degrees 
ty 
getDirection: function (startPoint, endPoint) { 
var angle = swipeRecognizer.getAngle(startPoint, endPoi 


nt) 
if ((angle < -45) && (angle > -135)) { 
return "up" 
} else if ((angle >= 45) && (angle < 315)) { 
return "down" 
} else if ((angle > -45) && (angle <= 45)) { 
return "right" 
} else{ 
return "left" 
} 
ty 
touchstart: function (event) { 
ty 
touchmove: function (event) { 
ty 
touchend: function (event) { 
} 
} 


SwipeRecognizer.touchcancel = swipeRecognizer .touchend 
Recognizer.add('swipe', swipeRecognizer) 





如 果 大 家 会 avalon， 可 以 使 用 以 下 页 面 进行 测 





<!DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="UTF-8"> 

<title>touch</title> 

<script src="../../dist/avalon.mobile.js"></script> 

<meta id="viewport" name="viewport" content="initial-sc 
ale=1.0,user-scalable=no, 


minimum-scale=1.0, maximum-scale=1.0"> 
<style> 

.Swipeleft{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: aqua; 

} 

.Swiperight{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: khaki; 

} 

. Swipeup{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: blueviolet; 

} 

. Swipedown{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: lawngreen; 


J 


</style> 
</head> 
<body ms-controller="test"> 
<h1i>swipe</h1> 
<div class="swipeleft" ms-on-swipeleft="swipe"> 
left 
</div> 
<div class="swiperight" ms-on-swiperight="swipe"> 
right 
</div> 
<div class="Swipeup" ms-on-swipeup="swipe"> 
up 
</div> 
<div class="Swipedown" ms-on-Swipedown="swipe"> 


down 
</div> 
<script type="text/javascript"> 


var vm = avalon.define({ 
$id: "test", 
Swipe: function (e) { 
console. log(e.type) 
this.innerHTML = e.type + " " + (new Date - 


9 ) 


}) 


</script> 
</body> 
</html> 





11.6 pinch 系 事件 


这 个 事件 也 叫 缩放 〈scale) ， 主 要 涉及 两 个 行 
为 pinchin〈 缩 小 ， 加 里 捏合 ， 两 只 手指 的 距离 越 来 
越 近 ) 和 pinchout (HHY spread, WA, IIb aK, 
两 只 手指 的 距离 越 来 越 远 ) 。 从 描述 来 看 ， 就 涉及 
两 个 触 换 点。 此外， 为 了 方便 我 们 在 开始 或 结束 时 
处 理 些 事情 ， 我 们 通常 把 这 家 族 扩 展 为 5 个 事件 : 
pininstart、pinch、pinchin、pinchout、pinchend。 此 
类 事件 经 名 用 于 奉 看 图 片 ， 如 图 11-7 所 示 。 我 们 可 
以 使 用 一 个 touch.pinch.js 文 件 独立 放置 它 的 代码 。 
其 主体 结构 如 下 : 








图 11-7 





var pinchRecognizer = { 
events: ['pinchstart', 'pinch', 'pinchin', 'pinchuot', 'pin 
chend'], 
getScale: function (x1, y1, x2, y2, x3, y3, x4, y4) { 
return Math.sqrt((Math.pow(y4 - y3, 2) + Math.pow(x4 - 
x3, 2)) / (Math.pow(y2 - 
yi, 2) + Math.pow(x2 - x1, 2))) 


ty 
getCommonAncestor: function (arr) { 
var el = arr[0], el2 = arr[1] 
while (el) { 
if (el.contains(el2) || el === el2) { 
return el 
t 


el = el.parentNode 


} 


return null 


ty 

touchstart: function (event) {}, 
touchmove: function (event) {}, 
touchend: function (event) {} 


} 


pinchRecognizer.touchcancel = pinchRecognizer .touchend 


Recognizer.add('pinch', pinchRecognizer ) 


这 里 涉及 两 个 辅助 方法 ， 第 一 个 是 求 放 缩 比 ， 
路 思 是 计算 前 后 这 两 点 的 距离 的 比率 ， 第 二 个 是 求 
两 个 触 探 点 的 最 近 公 共和 祖先 。 





touchstart: function (event) { 
var pointers = Recognizer.pointers 
Recognizer.start(event, avalon.noop) 
var elements = [] 
for (var p in pointers) { 
if (pointers[p].startTime) { 
elements.push(pointers[p].element ) 
} else { 
delete pointers[p] 
} 
} 
pointers.elements = elements 
if (elements.length === 2) { 


pinchRecognizer.element = pinchRecognizer .getCommonAnce 
stor(elements) 
Recognizer .fire(pinchRecognizer .getCommonAncestor (eleme 
nts), ‘pinchstart', { 
scale: 1, 
touches: event.touches, 
touchEvent: event 


}) 





接 下 来 的 touchstart 回 调 中 ， 我 们 需要 触发 
pinchstart 方 法 。 我 们 在 公共 的 Recognizer.start 方 法 


中 已 经 将 所 有 触摸 点 储存 在 Recognizer.pointers 对 象 
上 ， 这 时 我 们 将 它 转换 成 一 个 数组 ， 判 定 个 数 是 否 
为 2。 默 认 的 放 缩 比 scale 为 1。 





touchmove: function (event) { 
if (pinchRecognizer.element && event.touches.length > 1) { 
var position = [], 
current = [] 
for (var i = 0; i < event.touches.length; i++) { 
var touch = event.touches[i]; 
var gesture = Recognizer.pointers[touch. identifier ] 


/ 

position.push([gesture.startTouch.clientX, gesture. 
startTouch.clienty]); 

current.push([touch.clientX, touch.clientyY]); 


} 


var scale = pinchRecognizer.getScale(position[0][0], po 
sition[0][1], position[1][0], position[1][1], current[0][0], c 
urrent[O][1], current[1][0], current[1][1]); 
pinchRecognizer.scale = scale 
Recognizer.fire(pinchRecognizer.element, 'pinch', { 
scale: scale, 
touches: event.touches, 
touchEvent: event 


t) 


if (scale > 1) { 
Recognizer.fire(pinchRecognizer.element, 'pinchout' 


scale: scale, 
touches: event.touches, 
touchEvent: event 


t) 


} else { 
Recognizer.fire(pinchRecognizer.element, 'pinchin', 


scale: scale, 
touches: event.touches, 


touchEvent: event 
}) 
} 


event.preventDefault( ) 


ty 





touchmove 回 调 比 较 复杂 ， 我 们 需要 在 里 面 区 
分 放大 或 是 缩小 。 我 们 需要 取得 当前 To 
标 ， 也 就 是 pageX、pageY。 然 后 一 共 4 个 点 、8 个 参 
数 放 进 getScale 方 法 里 计算 放 缩 比 。 ition 

选择 触发 pinchin、pinchout 事 件 。 为 了 方便 一 
些 懒 人 ， 我 们 也 提供 了 pinch 事 件 。 最 后 的 
event.preventDefault() 是 为 了 阻止 文本 被 选择 。 





touchend: function (event) { 
if (pinchRecognizer.element) { 
Recognizer.fire(pinchRecognizer.element, 'pinchend', { 
scale: pinchRecognizer.scale, 
touches: event.touches, 
touchEvent: event 
}) 


pinchRecognizer.element = null 


Recognizer.end(event, avalon.noop) 





touchend 回 调 则 比较 简单 ， 放 缩 比 是 上 一 个 
touchmove 回 调 中 保留 下 来 的 ， 直 接 用 到 pinchend 事 
件 上 。 最 后 做 一 些 清除 工作 。 








如 果 大 家 会 avalon， 可 以 使 用 以 下 页 面 进行 测 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>touch</title> 
<script src="../../dist/avalon.mobile.js"></script> 
<meta id="viewport" name="viewport" content="initial-sc 
ale=1.0,user-scalable=no, 
minimum-scale=1.0, maximum-scale=1.0"> 
<style> 
.pinch{ 
width:230px; 
height:230px; 
overflow: hidden; 
display: inline-block; 
background:red; 


} 
</style> 
</head> 
<body ms-controller="test"> 
<hi>pinch, pinchstart, pinchend, pinchin, pinchout</h1> 
<div class="pinch" 
ms-on-pinchstart='pinch' 
ms -on-pinchend='pinch' 
ms -on-pinch="pinch" 
ms-on-pinchin="scale" 
ms -on-pinchout="scale"> 
<p>{{a}}</p> 
<p>{{b}}</p> 


</div> 
<script type="text/javascript"> 


var vm = avalon.define({ 
$id: "test", 
a: Oy 
b: ae 
pinch: function (e) { 
vm.a = e.type 


ty 
scale: function (e) { 
vm.b = e.type + " " + e.scale 
if ("transform" in this.style) { 
this.style.transform = 'scale(' + e.scale + ')' 
} else { 
this.style.webkitTransform = 'scale(' + e.scale 
ci oer 
} 
} 
}) 
</script> 
</body> 


</html> 





11.7 拖 放 系 事件 





这 个 其 实 与 PC 疹 的 实现 原理 差不多 ， 在 鼠标 
(手指 ) 放下 时 ， 收 集 坐 标 ， 移 动 时 ， 得 到 改变 距 
离 ， 加 上 最 开始 的 ttp、left 样 式 值 上 ， 就 能 拖 动 目 
标 元素 了 。 不 过 在 移动 端 上 ， 我 们 还 可 以 使 用 
transform 样 式 实现 。 此 类 事件 应 该 是 最 党 用 的 事件 
J, AIRRA, KEWAT, WRA H 
移动 …... 如 图 11-8 所 示 。 














角 拔 的 计算 ， 如 图 11-9 所 示 。 


我 们 可 以 使 用 一 个 touch.drag.js 文 件 独立 放置 它 
的 代码 。 其 代码 如 下 。 


6:09PM 





touchpoint 







touchAngle 


图 11-9 





var Recognizer = avalon.gestureHooks 
var dragRecognizer = { 
events: ['dragstart', 'drag', 'dragend'], 
touchstart: function (event) { 
Recognizer.start(event, avalon.noop) 


ty 


touchmove: function (event) { 
Recognizer.move(event, function (pointer, touch) { 
var extra = { 

deltaX: pointer.deltax, 
deltaY: pointer.deltay, 
touch: touch, 
touchEvent: event, 
isVertical: pointer.isVertical 


} 
if ((pointer.status === 'tapping') && pointer.dista 
nce > 10) { 
pointer.status = 'panning' 
Recognizer.fire(pointer.element, 'dragstart', e 
xtra) 
} else if (pointer.status === 'panning') { 
Recognizer.fire(pointer.element, 'drag', extra) 
} 
}) 


event.preventDefault(); 
ty 
touchend: function (event) { 
Recognizer.end(event, function (pointer, touch) { 
if (pointer.status === 'panning') { 
Recognizer.fire(pointer.element, 'dragend', { 
deltaX: pointer.deltax, 
deltaY: pointer.deltay, 
touch: touch, 
touchEvent: event, 
isVertical: pointer.isVertical 
}) 
} 
}) 
Recognizer.pointers = {} 
} 
} 


dragRecognizer.touchcancel = dragRecognizer.touchend 


Recognizer.add('drag', dragRecognizer) 





大 体 结构 与 swipe 拳 不 多 ， 许 多 工作 交 由 


Recognizer.start. Recognizer. move, Recognizer.end 


复 用 了 。 


如 果 大 家 会 avalon， 可 以 使 用 以 下 页 面 进行 测 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>touch</title> 
<script src="../../dist/avalon.mobile.js"></script> 
<meta id="viewport" name="viewport" content="initial-sc 
ale=1.0,user-scalable=no, 
minimum-scale=1.0, maximum-scale=1.0"> 
<style> 
.drag{ 
width: 200px; 
height :200px; 
overflow: hidden; 
display: inline-block; 
background: aqua; 


} 
</style> 
</head> 
<body ms-controller="test"> 
<h1>drag, dragstart,dragend</h1> 
<div class="drag" 
ms-on-dragstart="dragstart" 
ms-on-drag="drag" 
ms-on-dragend="dragend"> 
<p>{{a}}</p> 
<p>{{b}}</p> 
<p>{{c}}</p> 
</div> 


<script type="text/javascript"> 
var dx = 0, dy = 0; 


var vm = avalon.define({ 
$id: "test", 


a: ey 

b: wea 

Cc: meng 

dragstart: function (e) { 
vm.a = e.type 
vm.c = "" 

ty 


drag: function (e) { 
var x = dx + e.deltaXx 
var y = dy + e.deltay 
var offx = X + "px"; 
var offy = y + "px"; 
vm.b = offx + " drag " + offy 
if ("transform" in this.style) { 


this.style.transform = "translate3d(" + offx + 
nh Offty 4", 0)"; 
} else { 
this.style.webkitTransform = "translate3d(" + o 
ffx + "," + offy + ",0)"; 
} 
ty 
dragend: function (e) { 
vm.a =" " 
dx = e.touch.pagex 
dy = e.touch.pageyY 
vm.c = e.type 
} 
}) 
</script> 
</body> 


</html> 





11.8 rotate 系 事件 





旋转 在 移动 端 也 非常 弟 用 ， 它 是 以 手指 所 在 的 
元 系 的 中 心 为 圆心 ， 手 指 在 它 的 某 一 边缘 ， 然 后 拖 
动 它 实现 旋转 。 它 可 以 说 是 拖 搜 事 件 的 变种 。 在 本 
书 中 的 旋转 事件 是 单 指头 的 ， 在 网 上 也 流行 另 一 种 
实现 ， 以 hammer.js 为 首 ， 双 指头 实现 旋转 。 





宣传 活动 页 面 经 常见 的 抽奖 转盘 〈 见 图 11- 
10) 。 





图 11-10 


我 们 可 以 使 用 一 个 touch.rotate.js 文 件 独立 放置 
它 的 代码 。 其 代码 如 下 。 





var rotateRecognizer = 
events: ['rotate', 'rotatestart', 'rotateend'], 


getAngle180: function (p1, p2) { 
// AE, 范围 在 {0。 一 180"}+， 用 来 识别 旋转 角度 
var agl = Math.atan((p2.pageY - pi.pageY) * -1 / (p2.pa 
geX - pi.pagex)) * (180 / Math.PI) 
return parseInt((agl < © ? (agl + 180) : agl), 10) 
ty 
rotate: function (event, status) { 
ty 
touchstart: function (event) { 
var pointers = Recognizer.pointers 
Recognizer.start(event, avalon.noop) 
var finger 
for (var p in pointers) { 
if (pointers[p].startTime) { 
if (!finger) { 
finger = pointers[p] 
} else {// 如 果 超 过 一 个 指头 就 中 止 旋转 


return 
} 


J 


rotateRecognizer.finger = finger 

var el = finger.element 

var docOff = avalon(el).offset() 

rotateRecognizer.center = {// 求 得 元 素 的 中 心 
pagex: docoff ,Jeft + el.offsetWidth / 2, 
pageY: docOff.top + el.offsetHeight / 2 











} 


rotateRecognizer.startAngel = rotateRecognizer.getAngle 
180(rotateRecognizer.center, finger.startTouch) 

ty 

touchmove: function (event) { 
Recognizer.move(event, avalon.noop) 
rotateRecognizer.rotate(event ) 

ty 

touchend: function (event) { 
rotateRecognizer.rotate(event, "end" ) 
Recognizer.end(event, avalon.noop) 


i 


rotateRecognizer.touchcancel = rotateRecognizer .touchend 


Recognizer.add('rotate', rotateRecognizer ) 


[L SCR 


这 里 单独 将 rotate 方 法 挑 出 来 详细 讲 。 我 们 先 
看 一 下 touchstart 回 调 ， 它 的 作用 是 判定 当前 是 个 只 
有 一 个 触 措 点 ， 并 求 出 元 系 的 中 心 ， 这 时 就 可 以 得 
到 其 初始 角度 。 




















rotate: function (event, status) { 

var finger = rotateRecognizer.finger 

var endAngel = rotateRecognizer.getAngle180(rotateRecognize 
r.center, finger.lastTouch) 

var diff = rotateRecognizer.startAngel - endAngel 


var direction = (diff > 0 ? 'right' : 'left') 
var count = 0; 
var _ rotation = ~~finger.element.__rotation 
while (Math.abs(diff - _ rotation) > 90 && count++ < 50) { 
if (__rotation < 0) { 
diff -= 180 
} else { 
diff += 180 
} 
} 
var rotation = finger.element. rotation = __rotation = dif 


rotateRecognizer.endAngel = endAngel 
var extra = { 
touch: event.changedTouches[0], 
touchEvent: event, 
rotation: rotation, 
direction: direction 


} 

if (status === "end") { 
Recognizer.fire(finger.element, 'rotateend', extra) 
finger.element. rotation = 0 

} else if (finger.status === 'tapping' && diff) { 
finger.status = "panning" 
Recognizer.fire(finger.element, 'rotatestart', extra) 


} else { 
Recognizer.fire(finger.element, 'rotate', extra) 
} 
ty 





rotate 需 要 计算 当前 是 往 哪个 方 回 旋转 ， 或 者 
说 是 顺 时 针 还 是 逆 时 针 。 此 外 还 有 一 个 循环 ， 将 太 
大 的 角度 进行 收缩 ， 比 如 370°* 相 当 于 10°*。 最 后 将 








这 和 角度 放 到 元 系 的 一 个 属性 上 。 这 个 属性 在 移动 时 
定 被 重 写 ， 直 到 旋转 结束 。 





如 果 大 家 会 avalon， 可 以 使 用 以 下 页 面 进行 训 





<!DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="UTF-8"> 
<title>touch</title> 
<script src="../../dist/avalon.mobile.js"></script> 
<meta id="viewport" name="viewport" content="initial-sc 
ale=1.0,user-scalable=no, 
minimum-scale=1.0, maximum-scale=1.0"> 
<style> 
.rotate{ 

width: 200px; 

height :200px; 

overflow: hidden; 

display: inline-block; 

background: aqua; 


border-radius: 100px; 


} 


</style> 
</head> 
<body ms-controller="test"> 
<hi>drag,dragstart, dragend</h1> 
<div class="rotate" 
ms-on-rotate="rotate" 
ms-on-rotatestart="rotatestart" 
ms-on-rotateend="rotateend" 
> 
<p>000000</p> 
<p>111111</p> 
<p>222222 {{a}}</p> 
<p>333333 {{b}}</p> 
<p>{{c}}</p> 
</div> 


<script type="text/javascript"> 


var vm = avalon.define({ 
$id: "test", 


a: wee 
b: ae. 

" 了 
C my 


rotatestart: function (e) { 
vm.a = e.type 
vm.b = vm.c = "" 


ty 

rotateend: function (e) { 
vm.a = e.type 
vm.b = e.direction 

ty 


rotate: function (e) { 
var a = e.rotation 
vm.c = "旋转 了 " 十 a + " 度 " 


this.style.webkitTransform = 'rotate(' + a + 'deg)' 
} 
}) 
</script> 
</body> 


</html> 


11.9 ”总 结 


由 于 苹果 早期 的 设计 失误 及 人 们 对 交互 要 求 的 
提高 ， 因 此 如 你 们 所 见 ， 这 些 事件 都 是 合成 事件 。 
它们 都 是 根据 那 4、5 个 事件 开 及 出 来 的 ， 在 菏 一 个 
rE SUE, ARLE, Wa Ae 
目 定 义 事件 。 因 此 大 家 如 条 想 开发 目 己 的 手势 库 ， 
必须 有 识别 占 的 意识 ， 这 样 丈 能 市 省 大 量 的 代码 。 
此 外 ， 本 半 没 有 提 及 如 何 关 容 微软 平台 的 事件 ， 不 
过 本 人 认为 微软 提供 的 原生 事件 比 touch 系 事件 好 用 
得 多 ， 大 家 也 可 以 模拟 微软 的 思路 开 友 手势 库 。 











最 后 奉 上 一 些 链接 让 大 家 参考 一 下 : 


http://blogs.msdn.com/b/ie/archive/2012/06/20/go-beyond-pan-zoo 


m-and-tap-using-gesture-events.aspx https://msdn.microsoft.com/ 
en-us/library/windows/apps/hh441180.aspx 





严格 来 说 ， 手 机 上 的 事件 分 三 大 类 。 


C1) 触 屏 事件 ， 通过 触 模 ， 手 势 进行 触 友 
《如 手指 点 击 ， 缩 放 ) 。 


(2) 运动 事件 : 通过 加 速 器 进行 触发 (如 手 
HLZ) 。 


(3) 远程 控制 事件 ， 通过 其 他 远程 设备 触发 
《如 耳机 控制 按钮 ) 但 除了 触 屏 事件 ， 其 他 两 个 ， 
设备 不 文 持 就 无 法 通过 单纯 的 JS 手段 模拟 了 。 因 此 
本 章 就 只 介绍 触 屏 事件 。 





A a a IA Ja in Node.js EA & FHA FEB 
大 或 堵塞 线程 的 行为 ， 对 于 JavaScript 这 样 单 线程 的 
东西 唯一 的 解 类 方法 束 是 提供 异步 API。 噶 步 API 古 
怎么 样 的 呢 ? 简单 来 说 ， 


它 是 不 会 立即 执行 的 方 


法 。 比 方 说 ， 一 个 长 度 为 1000 的 数组 ， 在 for 循 环 
内 ， 可 能 不 到 几 唉 秒 就 执行 完毕 ， 厂 在 后 端的 其 他 
语言 ， 则 耗 时 更 少 。 但 有 时 候 ， 我 们 不 需要 这 么 快 
的 操作 ， 我 们 想 在 页 面 上 能 用 肉眼 看 到 它 执行 的 每 
一 步 ， 那 就 需要 异步 API。 还 有 些 操作 ， 比 如 加 载 
资源 ， 你 想 快 也 快 不 了 ， 它 不 可 能 一 下 子 提 供给 
你 ， 你 必须 等 待 ， 但 你 也 不 能 一 直 王 等 下 去 什么 也 
不 干 ， 得 允许 我 们 跳 过 这 些 加 载 资源 的 逻辑 ， 执 行 
下 面 的 代码 。 于 是 浏览 右 首 移 捅 出 的 两 个 开 步 
API， 就 是 setTimeout 与 setImterval。 后 面 开 始 出 现 
各 种 事件 回调 ， 它 只 有 用 户 执行 了 采种 操作 后 才 触 
Ro ALm WMEZ, XMLHttpRequest, 
postMessage, WebWorkor, setImmediate, 











requestAnimation Frame% (1812-1) . 








这 些 东 西 都 有 一 个 共同 的 特点 ， 束 是 拥有 一 个 
回调 函数 ， 描 述 一 会 儿 要 干什么 。 有 的 异步 API 还 
提供 了 对 应 的 中 断 API， 比 如 clearTimeonut、 


clearInterval. clearImmediate, 


cancelAnimationFrame. 


同步 (Synchronous) 
——— oo O 


异步 (Asynchronous) 






图 12-1 


早 些 年 ， 我 们 惑 是 通过 setIimeout 或 setInterval 
在 网 页 上 实现 动 男 的 。 这 种 动画 其 实 就 是 通过 这 些 
异步 API 不 断 反 复 调 用 同一 个 回调 实现 的 ， 回 调 里 








TEL ce XT TGA TS AEN a EEE CET RAD TE LI o 


随 着 iframe 的 挖掘 与 XMLHttpRequest 的 出 现 ， 
无 颖 刷新 让 用 户 驻 留 在 同一 个 页 面 上 的 时 间 越 来 越 
长 ， 许 多 功能 都 集成 在 同一 个 页 面 。 为 实现 这 些 功 
能 ， 我 们 融 得 从 后 闪 加 载 数 据 与 模板 ， 来 拼装 这 些 
新 区 域 。 这 些 加 载 数据 与 模板 的 请 求 可 能 是 并 行 
的 ， 可 能 是 存在 依赖 的 。 只 有 在 所 有 数据 与 模板 都 
残 络 时 ， 我 们 才能 顺利 拼接 出 HIML 子 页 面 插入 到 
正确 的 位 置 上 。 面 对 这 些 复杂 的 流程 ， 人 们 不 得 不 
发 明 一 些 新 模式 来 应 对 它们 。 最 早 被 发明 出 来 的 
是 “回调 地 狱 ”(callback hel) ， 这 应 该 是 一 个 技 
能 。 事 实 上 ， 几 乎 JavaScript 中 的 所 有 异步 函数 都 用 
到 了 回调 ， 连 续 执 行 几 个 异步 函数 的 结果 就 是 层 层 
BREE AY EI PAA Ae BZ OR SARS. KEA 
人 说 ， 回 调 吏 是 程序 员 的 goto 语 句 。 


























此 外 ， 并 不 是 每 一 个 工序 都 是 一 帆 风 顺 的 ， 如 


果 有 一 个 出 错 了 呢 ， 对 于 JavaScript 这 样 单 线程 的 语 
言 ， 往 往 是 人 致命 的 ， 必 须 try...catch， 但 try...catch 语 
只 能 捕捉 当前 抛 出 的 异 音 ， 对 后 来 执行 的 代码 无 





function throwError() { 
throw new Error('ERROR'); 
} 


try { 
setTimeout(throwError, 3000); 


} catch (e) { 
alert(e);// 这 里 的 异常 无 法 捕获 











这 些 就 是 本 章 所 要 处 理 的 诬 题 。 不 难 理 解 ， 
domReady、 动 画 、Ajax 在 骨子里 都 是 同一 样 东 西 ， 
假 右 能 将 它们 抽象 成 一 个 东西 ， 显 然 是 非常 有 用 
的 。 








12.1 setTimeout‘SsetInterval 


首先 我 们 得 深入 学 习 一 下 这 两 个 API。 一 般 的 
书籍 只 是 简单 介绍 它们 的 用 法 ， 没 有 对 它们 内 在 的 
一 些 隐秘 知识 进行 描述 。 它 们 对 我 们 创建 更 有 用 的 
异步 模型 非常 有 用 。 








(1) 如 果 回 调 的 执行 时 间 大 于 间隔 时 间 ， 那 
么 浏览 右 会 继续 执行 它们 ， 导 人 致 真正 的 间隔 时 间 比 
原来 的 大 一 后。 


(2) 它们 存在 一 个 最 小 的 时 钟 间 隔 ， 在 IE6~ 
IE8 中 为 15.6ms， 后 来 精 ae IE10 为 4ms， 其 
他 浏览 絮 相 仿 。 我 们 可 以 通过 以 下 函数 大 致 求 得 此 
EE 





function Fe (SouNs ms) { 
var c = 1; 
var time = [new Date() * 
var id = See au ne { 
time.push(new Date() * 1); 
c += 1; 


if (c <= count) { 
setTimeout(arguments.callee, ms); 
} else { 
clearTimeout(id); 
var tl = time.length; 
var av = 0; 
for (var i = 1; i < tl; i++) { 
var n = time[i] - time[i - 1]; 
// 收 集 每 次 与 上 一 次 相差 的 时 间 数 


av += n; 





} 
alert(av / count); // 求 取 平 均值 
} 


}, ms); 


} 


winod.onload = function() { 
var id = setTimeout(function() { 
test(100, 1); 
clearTimeout(id); 
}, 3000); 





具体 如 表 12-1 所 示 。 


表 12-1 


Firefox Firefox Chrome Chrome Opera Safari ae IE 
3.6.3 18.1 10.53 23 12.41 5.01 10 





但 上 面 的 数据 很 难 与 官方 给 出 的 数值 一 致 ， 





为 它 太 容易 受 外 部 因 系 影响 ， 比 如 电池 快 没 电 了 ， 
同时 打开 的 应 用 程序 太 多 了 ， 导 臻 CPU 忙碌， 这 些 
都 会 让 它 的 数值 偏 局 。 


如 果 嫌 旧版 本 下 的 最 短 时 钟 间隔 太 大 ， 我 们 或 
许 有 办 法 改造 一 下 setTimeout， 利 用 image 死 链 时 六 
即 执行 onerror 回 调 的 情况 进行 改造 。 


var orig_setTimeout = window.setTimeout; 
window.setTimeout = function (fun, wait) { 
if (wait < 15) { 
orig_setTimeout(fun, wait); 
} else { 
var img = new Image(); 


img.onload = img.onerror = function () { 
fun(); 

}; 

img.src = "data:,foo"; 
} 

}; 





(3) 有 关 零 秒 延 运 ， 此 回调 将 会 放 到 一 个 能 
立即 执行 的 时 段 进行 触发 。JavaScript 代 人 码 大 体 上 是 
目 顶 回 下 执行 ， 但 中 间 和 穿插 着 有 关 DOM 泻 染 、 事 
件 回应 等 异步 代码 ， 它 们 将 组 成 一 个 队列 ， 零 秒 延 





述 将 会 实现 插队 操作 。 





(4) 不 写 第 二 参数 ， 在 下、Firefox 中 ， 浏 览 
医 目 动 配 时 间 ， 第 一 次 配 可 能 给 个 很 大 数字 ， 
100ms 上 下 ， 往 后 会 缩小 到 最 小 时 钟 间隔 ，Safari、 
Chrome、Opera 则 多 为 10ms 上下。 在 Firefox 中 ， 
setInterval 个 写 第 二 参数 ， 会 当 作 setTimeout 处 理 ， 
只 执行 一 次 。 





window.onload = function() { 
var a = new Date - 0; 
setTimeout(function() { 
alert(new Date - a); 
}); 
var flag = 0; 
b = new Date, 
text 二 "n 
id = setInterval(function() { 
flag++; 


if (flag > 4) { 
clearInterval(id) 
console. log(text) 


text += (new Date - b+" "); 
b = new Date 





(5) 标准 浏览 器 与 正 10 都 支持 额外 参数 ， 从 


第 3 个 参数 起 ， 作 为 回调 的 传 参 传 入 ! 


setTimeout(function() { 
alert([].slice.call(arguments) ); 
}, 10, 1, 2, 4); 
TE6 一 IE9 可 以 用 以 下 代码 模拟 。 
if (window.VBArray && !(document.documentMode > 9)) { 
(function(overrideFun) { 
window.setTimeout = overrideFun(window.setTimeout ) ; 


window.setInterval = overrideFun(window.setInterval); 
})(function(originalFun) { 


return function(code, delay) { 
var args = [].Sslice.call(arguments, 2); 
return originalFun(function() { 
if (typeof code == 'string') { 
eval(code); 
} else { 


code.apply(this, args); 


} 
}, delay); 





(6) setTimeout 方法 的 时 间 参 数 知 为 极端 值 
《如 负数 、0、 或 者 极 大 的 正 数 ) ， 则 各 浏览 器 的 
处 理会 出 现 较 大 甜 异 ， 某 些 浏 览 句 会 立即 执行 。 


12.2 ”Promise 诈 生前 的 世界 


在 Promise 被 引进 到 JavaScript 世 界 时 ， 人 们 通 
利用 以 下 3 个 手段 解决 异步 问题 。 


12.2.1 回调 函数 callbacks 


广义 上 回调 函数 的 定义 为 : 一 个 通过 函数 指针 
调用 的 函数 。 _ :把 函数 的 指针 Geh) 作为 参 
数 传递 给 另 一 个 函数 ， 当 这 个 指针 被 用 为 调用 它 所 
指 问 的 函数 时 ， P e 数 。 回 调 函 数 
不 是 由 该 水 数 的 实现 方 直接 调用 ， 而 是 在 特定 的 事 
件 或 条 件 发 生 时 由 另外 的 一 方 调 用 的 ， 用 于 对 该 事 
件 或 条 件 进行 响应 。 











在 JavaScript 中 ， 回 调 函 数 共 体 的 定义 为 : 函数 
A 作为 参数 (函数 引用 ) 传递 到 另 一 个 函数 B 中 ， 
并 且 这 个 函数 B 执 行 函 数 A， 我 们 就 说 函数 A 叫 做 回 





调 函 数 。 如 果 没 有 名 称 〔 函 数 表达 式 ) ， 就 叫做 匿 
名 回调 函数 。 因 此 callback 不 一 定 用 于 异步 ， 一 般 
> (BASE) 的 场景 下 也 经 常用 到 回调 ， 比 如 要 求 
执行 某 些 操作 后 执行 回调 函数 。 





Sa CHE) 中 使 用 回调 的 例子 ， 目 的 是 
在 funcl 代 码 执 行 完成 后 执行 func2。 


function a(callback) { 
callback(); 


} 


function b() { 
console.log('hello callback'); 


} 
a(b); // 注意 b() 作为 参数 传递 给 a( ) 的 时 候 是 不 需要 带 括 号 的 











浏览 器 最 早 内 置 的 setTimeout 与 setInteval 就 是 
基于 回调 的 思想 实现 的 ，Node.js 的 异步 API， 都 是 
通过 回调 实现 。 


回调 是 实现 异步 最 朴 系 的 方式 。 回 调 函数 的 优 
中 是 简单 、 容 易 理 解 和 部 著 ， 缺 后 是 不 利于 代码 的 


Pde AEP, SBD CIA RS TPES IR 
乱 ， 而 且 每 个 任务 只 能 指定 一 个 回调 函数 。 


12.2.2 ”观察 者 模式 0bservers 


观察 者 模式 又 叫做 发 布 订阅 模式 ， 它 定义 了 一 
种 一 对 多 的 关系 ， 让 多 个 观察 者 对 象 同时 监听 某 一 
个 主题 对 象 ， 这 个 主题 对 象 的 状态 发 生 改 变 时 就 会 
通知 所 有 观察 着 对 象 。 它 是 由 两 类 对 象 组 成 ， 主 题 
和 观察 者 。 主 题 负责 发 布 事件 ， 同 时 观察 者 通过 订 
阅 这 些 事件 来 观察 该 主题 ， 发 布 者 和 订阅 者 是 完 
解 耦 的 ， 彼 此 不 知道 对 方 的 存在 ， 两 者 仅仅 共享 一 
个 自 定义 事件 的 名 称 。 

















在 Node.js 中 通过 EventEmitter 实 现 了 原生 对 于 
这 一 模式 的 文 持 。 浏 览 器 中 window、document 与 元 
系 市 点 目 融 的 事件 机 制 就 是 基于 观察 者 模式 实现 
的 。 事 实 上 ， 我 们 过 历 一 下 元 素 贡 点 的 原型 链 ， 怠 
发 现 它们 的 一 个 原型 对 象 叫做 EventTargetl 

















function PubSub() { 
this.handlers = {}; 
} 
PubSub.prototype = { 
// 订阅 事件 
on: function(eventType, handler) { 
var self = this; 
if(!(eventType in self.handlers)) { 
self.handlers[eventType] = []; 





self. handlers[eventType].push(handler ); 
return this; 
ty 
// 触发 事件 (发 布 事件 ) 
emit: function(eventType) { 
var self = this; 
var handlerArgs = Array.prototype.slice.call(arg 








uments,1); 
for(var i = 0; i < self.handlers[eventType].leng 





th; i++) { 
self.handlers[eventType][i].apply(self,handler 
Args); 
return self; 
ty 
// 删除 订阅 事件 
off: function(eventType, handler)t{ 
var currentEvent = this.handlers[eventType]j; 
var len = 0; 
if (currentEvent) { 
len = currentEvent.length; 
for (var i= len - 1; i >= 0; i--){ 
if (currentEvent[i] === handler) { 
CcurrentEvent.splice(i, 1); 
} 
} 
return this; 
} 
}; 


var pubsub = new PubSub(); 
var callback = function(data){ 
console.log(data); 


}; 





// 订 阅 事件 A 

pubsub.on('A', function(data) { 
console.log(1 + data); 

+); 

pubsub.on('A', function(data) { 
console.log(2 + data); 

H); 

pubsub.on('A', callback); 


// 触 发 事件 A 
pubsub.emit('A', ' 我 是 参数 ' )， 








// 删 除 事 件 A 的 订阅 源 callback 
pubsub.off('A', callback); 


pubsub.emit('A', ' 我 是 第 二 次 调用 的 参数 ' ) ; 





运行 结果 〈 见 网 12-2) 。 


~ 一 


Errors Warnings Info Logs Debug Handled 


1 我 是 参数 

2 我 是 参数 

我 是 参数 

1 我 是 第 二 次 调用 的 参数 
2 我 是 第 二 次 调用 的 参数 
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图 12-2 


如 果 将 上 例 改 一 下 。 





function a(){ 
pubsub.emit('b' ) 


} 

pubsub.on('b', function b() { 
console.log('hello callback'); 

}) 





观 岁 者 模式 是 Gof 总 结 出 来 的 经 典 设 计 模 式 ， 
适应 用 性 非 党 好， 能 对 调用 方 与 被 调用 方 进行 很 好 
的 解 竹 。 我 们 可 以 用 一 个 pubsub 实 例 当 作 的 软件 
的 “ 消 轧 中 心 ?>， 了 解 存 在 多 少 信和 号、 每 个 信号 有 多 
少 订 阅 者 ， 从 而 监控 程序 的 运行 。 


12.2.3 ”事件 机 制 listeners 


这 个 类 似 于 观察 者 模式 。 


function a(){ 
a.emit('b') 
} 


var pubsub = new PubSub(); 
for(var i in a){ 

a[i] = pubsub[i] 
} 


a.handlers = {} 
// 数 据 自己 保存 ， 不 共存 
a.on('b', function b() { 








console.log('hello callback'); 
}) 





它 的 好 处 是 ， 当 目标 对 象 被 删除 时 ， 不 会 给 整 
个 系统 残留 一 些 无 用 的 负担 。 


观 岁 者 模式 与 事件 机 制 部 是 适用 监听 多 次 同类 
型 的 异步 行为 ， 不 适用 于 一 次 性 的 异步 行为 。 


12.3 JSDeferred = fe t# 





Deferred 是 当今 最 著名 的 异步 模型 之 一 。 它 原 
来 是 Python 的 Twisted 框 架 中 的 一 个 类 ， 后 来 被 
Mochikit 框 染 引 进来 ， 再 后 来 义 被 dojo 抄 去 。 但 那 
时 还 一 直 默 默 无 名 ， 直 到 JSDeferred 诞 生 。 
JSDeferred 在 日 本 火 了 几 年 ， 人 们 看 手 构建 
CommonJS 时 ， 直 接 以 它 为 蓝图 ， 推 出 Promise 规 
范 。Promise 规 范 又 存在 A、B、C、D、E 多 个 样 
本 ， 这 都 拜 那些 实现 了 Promise 库 的 作者 所 赐 ， 他 们 
都 是 基于 上 自己 的 库 推出 来 的 。 先 有 实现 后 有 规范 ， 
与 W3C 那 帮 人 的 作风 相反 ， 反 正 谁 也 不 服 谁 。 最 
近 ， 这 些 Promise 库 越 来 越 多 ， 最 后 选取 大 家 认同 的 
几 条 重新 制定 出 来 。 这 个 时 期 大 概 拖 上 几 年 ， 因 此 
jQuery 整 中 招 了 。 它 最 先 实 现 的 
Deferred/Promise (jQuery 1.5， 这 是 两 个 东西 ， 其 
规范 里 只 有 一 个 东西 ) 连 Promise A 也 不 算 ， 后 来 不 








得 不 与 Promise ASET o {AA W3CHVT RUE TT R 
与 jQuery 1.9 MAA. Fre jQuery 3 SHA 
bias A Promise, Wee ANAS, ACHAT Bae 
容 。 这 就 古 Promise 扼 要 的 “血泪 史 ”* 了 ， 如 图 12-3 所 
ZN o 





Mochikit Deferred 


图 12-3 





Promise 发 展 历 史 中 最 重要 的 一 块 基石 承 是 
JSDeferred， 可 以 说 Promise/A+ 规 范 的 制定 则 很 大 


程度 地 参考 了 由 日 本 geek cho45 发 起 的 jsDeferred 项 
目 ， 退 本 渊源 地 了 解 jsDeferred 是 十 分 有 必要 的 。 


jsDeferred 的 特点 。 





(内 部 通过 单 同 链表 结果 存储 成 功 事件 处 理 函 
数 、 失 败 事件 处 理沙 数 和 链表 中 下 一 个 Deferred 类 
型 对 象 。 


(2) Deferred 实 例 内 部 没有 状态 标识 〈 也 束 是 说 
Deferred 实 例 没 有 目 定 义 的 生命 周期 ) 。 


(3) 由 于 Deferred 实 例 没 有 状态 标识 ， 因 此 不 文 
Ff MD RCS EE Ab E PR BC SY GE AB Eo 











(4) Deferred 实 例 的 成 功 /失败 事件 是 基于 事件 本 
Fy EY Fa AC TTD BK Vd A AY o 


© 由 于 Deferred 实 例 没 有 状态 标识 ， 因 此 成 功 / 
失败 事件 可 被 多 次 触发 ， 也 不 存在 不 变 值 作为 事件 


处 理 函 数 入 参 的 说 法 。 


Promise/A 的 特点 。 





CL) 内 部 通过 单 癌 链表 结果 存储 成 功 事 件 处 理 函 
数 、 失 败 事件 处 理 函 数 和 链表 中 下 一 个 Promise 类 型 
对 象 。 


D Promise 实 例 内 部 有 状态 标识 : pending WJ 
始 状态 ) 、fulfilled (成 功 状态 ) 和 rejected〈 失 败 
状态 ) ， 且 状态 为 单方 同 移 动 pending- 
>fulfilled”“pending->rejected”( 也 就 是 Promse 实 例 
存在 自 定 义 的 生命 周期 ， 而 生命 周期 的 每 个 阶段 具 
备 不 同 的 事件 和 操作 ) 。 





(3) 由 于 Promise 实 例 含 状 态 标 识 ， 因 此 文 持 事 
AEF Ath FE PRI ZAC SY HEE BB Eo 


(4) Promise 实 例 的 成 功 /失败 事件 函数 是 基于 
Promise 的 状态 而 被 调用 的 。 





核心 区 别 


Promises 调 用 成 功 / 失 败 事件 处 理 函 数 的 两 种 流 


( 调用 resolve/reject 方 法 尝试 改变 Promise 实 例 
的 状态 ， 硅 成 功 改变 其 状态 ， 则 调用 Promise 当 前 状 
态 相 应 的 事件 处 理 函 数 〈( 类 似 于 触发 onchange 事 
件 ) 。 


D 通过 then 方 法 进行 事件 绑 定 ， 奉 Promise 实 例 
的 状态 不 是 pending， 则 调用 Promise 当 前 状态 相应 
的 事件 处 理 函 数 。 





由 上 述 可 以 知道 Promises 的 成 功 /失败 事件 处 理 
水 数 均 基于 Promise 实 例 的 状态 而 被 调用 ， 而 非 成 
功 /失败 事件 。 





jsDeferred 调 用 成 功 /失败 事件 处 理 函 数 的 沈 


调用 callyfail 方 法 触发 成 功 /失败 事件 ， 则 调用 
相应 的 事件 处 理 函 数 。 





此 jsDeferred 的 是 基于 事件 的 。 


下 列 内 容 均 为 大 概 介绍 API 接 口 ， 有 具体 用 法 请 
参考 官网 。 


1. 构造 函数 


Deferred ， 可 通过 new Deferred() 或 Deferred() 
两 种 方式 创建 Deferred 实 例 。 


var defer = Deferred();// 或 new Deferred() 
// 创 建 一 个 Deferred 对 象 
defer.next(function () { 
console.log('ok'); 
}).error(function (text) { 





console.log(text);//=> test 
}).fail('test'); 





2. 实例 方法 


Deferred.prototype.next(fn), HERJE 


件 处 理 函 数 ， 返 回 一 个 新 的 Deferred 实 例 。 在 没有 
调用 Deferred.prototype.call 前 这 个 事件 处 理 函 
数 并 不 会 执行 。 


var deferred = Deferred(); 
deferred.next(function (value) { 
console.log(value); // => aaa 


}).call('aaa'); 





Deferred.prototype.error(fn) ， 绑 定 失败 事 
件 处 理 函 数 ， 返 回 一 个 新 的 Deferred 实 例 。 在 没有 
oa. prototype.fail 前 这 个 事件 处 理 函 
数 并 不 会 执行 。 


var deferred = Deferred(); 
deferred.error(function () { 


console.log('error');// => error 
}).fail(); 





Deferred.prototype.call(val”) ， 触发 成 功 
事件 ， 返 回 一 个 新 的 Deferred 实 例 。 


Deferred.prototype.fail(val*) , WRR W 
事件 ， 返 回 一 个 新 的 Deferred 实 例 。 


3. 静态 属性 
Deferred.ok ， 默 认 的 成 功 事件 处 理 函 数 。 


Deferred.ng ， 默认 的 失败 事件 处 理 函 数 。 





Deferred.methods ， ERIA 的 [a] Wp ae ee A AS 


法 〈 供 Deferred.define 方 法 使 用 ) 。 


Deferred.methods = ["parallel", "wait", "next", "call", "loop", 
"repeat", "chain"]; 





4. HATTIE 


Deferred.define(obj，list) ， 暴 露 静 态 方法 
到 obj 上 ， 无 参 的 情况 下 obj 是 全 局 对 象 ， 侵 入 性 极 
强 ， 但 使 用 方便 。list 是 一 组 方法 ， 这 组 方法 会 同时 
注册 到 obj 上 。 


Deferred.call({Function} fn [, arg]*) ， 


创建 一 个 Deferred 实 例 并 且 触 发 其 成 功 事 件 。 





// 无 参 ， 侵入 式 ， 默认 全 局 对 象 ， 浏览 器 环境 为 window 
Deferred.define(); 
// 静 态 方法 入 next 被 注册 到 了 window 下 
next(function () { 

console. log('ok'); 




















}); 
var defer = {}; 
// 非 侵入 式 ，Deferred 的 静态 方法 注册 到 了 defer 对 象 下 
Deferred.define(defer); 
defer.next(function () { 
console.log('ok'); 




















}); 





Deferred.next({Function} fn), 创建 一 个 
Deferred 实 例 并 且 触 发 其 成 功 事 件 ， 其 实 束 是 无 法 
传 入 参 到 成 功 事件 处 理 函 数 的 Deferred.call(). 





Deferred.define(); 
next(function () { 
console.log('ok'); 
J); 
console.log('hello,world!');// => 先 输出 
// 上 面 的 代码 等 同 于 下 面 的 代码 


call(function () { 
console.log('ok'); 


+); 
console.log('hello,world!');// => 先 输出 





Deferred.wait(sec) ， 创 建 一 个 Deferred 实 


例 ， 并 等 竺 sc《〈 秒 ) 后 触发 其 成 功 事 件 ， 下 面 的 代 
但 首先 弹 “Hello,”, 24b Jag ti “World!” . 


next(function () { 
alert('Hello,'); 
return wait(2); // 延 迟 2s 后 执行 


next (function (r) { 
alert('World!'); 


+); 
console.log('hello,world!');// => 先 输出 





Deferred,.1oop(n，fun) ， 循 环 执行 n 次 fun， 
并 将 最 后 一 次 执行 fun0 的 返回 值 作为 Deferred 实 例 
成 功 事件 处 理 函 数 的 参数 ， 同 样 loop 中 循环 执行 的 
fun0 也 是 异步 的 。 


loop(3, function () { 
console.log(count); 
return count++; 
}).next(function (value) { 
console.info(value);// => 2 


Py 
// 上 面 的 代码 也 是 异步 的 (无 阻塞 的 ) 


console.info('aaa'); 





Deferred.parallel(dl[ ,fn]*) ， 把 参数 中 非 
Deferred 对 象 均 转换 为 Deferred 对 象 〈( 通 过 
Deferred.next()) ， 然 后 并 行 触发 中 的 Deferred 实 
例 的 成 功 事 件 。 


当 所 有 Deferred 对 象 均 调用 了 成 功 事 件 处 理 函 
数 后 ， 返 回 的 Deferred 实 例 则 触发 成 功 事 件 ， 并 且 
所 有 返回 值 将 被 封装 为 数组 作为 Deferred 实 例 的 成 
功 事件 处 理 函 数 的 入 参 。 





parallel() 强 悍 之 处 在 于 它 的 并 归 人 处理， 它 可 以 
将 参数 中 多 次 的 异步 最 终 并 归 到 一 起 ， 这 一 点 在 
JavaScript ajax 奶 侠 中 尤为 重要 ， 例 如 同时 发 送 两 条 
ajax 请 求 ， 最 终 parallel0 会 并 归 这 两 条 ajax 返回 的 结 
R. 





parallel0 进 行 了 3 次 重 载 。 


e parallel(fn[ ,fn]*)， 传 入 Function 类 型 的 参数 ， 允 


Vie 

。parallel(Array)， 给 定 一 个 由 Function 组 成 的 
Array 类 型 的 参数 。 

e parallel(Object)， 给 定 一 个 对 象 ， 由 对 象 中 所 有 
可 榴 举 的 Function 构 建 Deferred。 


图 12-4 演 示 了 Deferred.parallel 的 工作 模型 ， 它 
可 以 理解 为 合并 了 3 次 ajax 请 求 。 


Deferred.parallel ©) 演示 


异步 代码 2 (Deferred) | | 异步 代码 3 (Deferred) 


异步 代码 1 (Deferred ) 












Deferred 对 象 


图 12-4 





Deferred.define(); 
parallel(function () { 

// 等 待 2 秒 后 执行 

return wait(2).next(function () { return 'hello,'; }); 
}, function () { 


return wait(1).next(function () { return 'world!' }); 
}).next(function (values) { 
console.log(values);// => ["hello,", "world!"] 


}); 





当 parallel 传 递 的 参数 是 一 个 对 象 的 时 候 ， 返 回 
值 则 是 一 个 对 象 。 


parallel({ 
foo: wait(1).next(function () { 
return 1; 
+), 
bar: wait(2).next(function () { 
return 2; 


}) 
}).next(function (values) { 
console.log(values);// => Object { foo=1, bar=2 } 


}); 





AlljQuery.when() 4) H — H- 


Deferred.earlier(dl) ， 当 参 数 中 某 一 个 
Deferred 对 象 调用 了 成 功 处 理 函 数 ， 则 终止 参数 中 
其 他 Deferred 对 象 的 触发 的 成 功 事 件 ， 返 回 的 
Deferred 实 例 则 触发 成 功 事 件 ， 并 且 那 个 触发 成 功 
事件 的 函数 返回 值 将 作为 Deferred 实 例 的 成 功 事件 


Kb FH PR BLN AB 


注意 : Deferred.earlier() 并 不 会 通过 
Deferred.define(obj) 骏 露 给 obj， 它 只 能 通过 


Deferred.earlier() if] H 。 


Deferred.earlier() 内 部 的 实现 和 
Deferred.parallel() 大 同 小 异 ， 但 值得 注意 的 是 参 
数 ， 它 接受 的 是 Deferred， 而 不 是 parallel0 的 


Function. 


e Deferred.earlier(Deferred[ ,Deferred]*)， 传 入 
Deferred 类 型 的 参数 ， 允 许多 个 。 

e Deferred.earlier(Array)， 给 定 一 个 由 Deferred 组 
成 的 Array 类 型 的 参数 。 

e Deferred.earlier(Object)， 给 定 一 个 对 象 ， 由 对 象 
中 所 有 可 枚 举 的 Deferred 构 建 Deferred。 





Deferred.define(); 
Deferred. earlier ( 
wait(2).next(function () { return 'cnblog'; }), 


wait(1).next(function () { return ‘aaa' })//i1s 后 执行 成 功 
).next(function (values) { 
console.log(values);// 1s 后 => [undefined, "aaa" ] 


}); 





Deferred.repeat(n，fun) ， 循 环 执行 fun 方法 
n 次 ， 知 fun 的 执行 事件 超过 20 坚 秒 则 先 将 UI 线 程 的 
控制 权 交 出 ， 等 一 会 儿 再 执行 下 一 轮 的 循环 。 


Deferred.chain(args) ，chain() 方 法 的 参数 比 
较 独 特 ， 可 以 接受 多 个 参数 ， 参 数 类 型 可 以 是 : 
Function、Object、Array。chain() 方 法 比较 难 懂 ， 
它 古 将 所 有 的 参数 构造 出 一 条 Deferred 方 法 链 。 例 
如 Function 类 型 的 参数 。 





Deferred.define(); 
chain( 
function () { 
console.log('start'); 


function () { 
console.log('linkFly'); 
} 


); 

// 等 同 于 

next(function () { 
console.log('start'); 

}).next(function () { 


console.log('linkFly'); 
3); 
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chain( 
// 函 数 名 !=error， 则 默认 为 next 
function () { 
throw Error('error'); 





ty 
// KA Nerror 
function error(e) { 
console.log(e.message) ; 
} 
); 


// 等 同 于 
next(function () { 
throw Error('error'); 
}).error(function (e) { 
console.log(e.message) ; 


}); 





也 支持 Deferred.parallel0 的 方式 。 





chain( 


function () { 
return wait(1); 

}, 

function () { 
return wait(2); 

} 


).next(function () { 


console.log('ok'); 


}); 


// 等 同 于 
Deferred. parallel([ 
function () { 
return wait(1); 


了 
function () { 
return wait(2); 


} 
]).next(function () { 
console.log('ok'); 


}); 





Deferred.connect(funo, options), 六 = 


函数 封装 为 Deferred 对 象 ， 其 目的 是 融入 现 有 的 异 





AJ 


步 编 程 。 


N 


Deferred.connectO 有 两 种 重 载 。 


。 Deferred.connect(target,string)， 把 target 上 名 为 
string 指 定名 称 的 方法 包装 为 Deferred 对 象 。 

e Deferred.connect(function,Object), Object2#27> # 
有 一 个 属性 : target。 以 target 为 this 调 用 function 
方法 ， 返 回 的 是 包装 后 的 方法 ， 讼 方法 返回 





DeferredX} & . 
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HJ function 。 





var timeout = Deferred.connect(setTimeout, { target: window, ok 
: © }); 
timeout(1).next(function () { 

alert('after 1 sec'); 


}); 
// 另 外 一 种 传 参 


var timeout = Deferred.connect(window, "setTimeout"); 
timeout(1).next(function () { 
alert('after 1 sec'); 


}); 





Deferred.retry(retryCount, funcDeferred, 
options) ， 调 用 retryCount 次 funcDeffered 方 法 《〈 返 
回 值 类 型 为 Deferred) ， 直 到 触发 成 功 事件 或 超过 
尝试 次 数 为 止 。options 参 数 是 一 个 对 象 ， 
{wait:number} 指 定 每 次 调用 等 每 的 秒 数 。 


注意 : Deferred.retry0) 并 不 会 通过 
Deferred.define(obj) 骏 露 给 obj， 它 


Deferred.retryO 调 用 。 


Deferred.define(); 
Deferred.retry(3, function (number) {//Deferred.retry() 方 法 是 
的 方式 实现 的 
console.log(number ) ; 
return Deferred.next(function () { 
if (number ^ 1)// 当 number1=1 的 时 候 抛 出 异常 ， 表 示 失 败 ，number 
==1 的 时 候 则 让 它 成 功 











throw new Error('error'); 
}); 
}).next(function () { 
console.log('linkFly');//=>linkFly 


}); 





Deferred.register(name, fn) ， 将 静态 方法 


附加 Deferred. prototype 上。 
核心 源码 解读 : 


FATE PA BLD AP o 





function Deferred () { return (this instanceof Deferred) ? this 
.init() : new Deferred() } 











// 默认 的 成 功 事 件 处 理 函 数 
Deferred.ok = function (x) { return x }; 
// 默认 的 失败 事件 处 理 函 数 
Deferred.ng = function (x) { throw x }; 
Deferred.prototype = { 

// 初始 化 函数 

init : function () { 

this._next = null; 






































this.callback = { 
ok: Deferred.ok, 
ng: Deferred.ng 


}; 


return this; 


}}; 





触发 回调 部 分 。 


Deferred.prototype.call function (val) { return this._fire("o 
k", val) }; 
Deferred. prototype. fail function (err) { return this._fire("n 
g", err) }; 
Deferred.prototype._fire = function(okng, value){ 
var next = "ok"; 
try { 
// 调用 当前 Deferred 实 例 的 事件 处 理 函 数 
value = this.callback[okng].call(this, value); 
} catch (e) { 
next = "ng"; 
value = e; 
if (Deferred.onerror) Deferred.onerror(e); 























if (Deferred.isDeferred(value)) { 
// 若 事件 处 理 函 数 返回 一 个 新 Deferred 实 例 ， 则 将 新 Deferred 实 例 的 链 
表 指 针 指 向 当前 Deferred 
// 实例 的 链表 指针 指向 
// 这 样 新 Deferred 实 例 的 事件 处 理 函数 就 会 先 与 原 链表 中 其 他 Deferred 
实例 的 事件 处 理 函 数 被 调用 。 
value._next = this._next; 
} else { 
if (this._next) this._next._fire(next, value); 










































































} 


return this; 


}; 
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Deferred.prototype.next = function (fun) { return this._post("o 
k", fun) }; 
Deferred.prototype._post = function (okng, fun) { 
// 创建 一 个 新 的 peferred 实 例 ， 插 入 Deferred 链 表 尾 ， 并 将 事件 处 理 函 数 绑 
定 到 新 的 Deferred 上 
this._next = new Deferred(); 
this. _next.callback[okng] = fun; 
return this._next; 
}; 
Deferred.next = 
Deferred.next_faster_way_readystatechange | | 
Deferred.next_faster_way_Image | | 
































Deferred.next_tick | | 
Deferred.next_default; 





Deferred.next 是 jsDeferred 最 出 彩 的 地 方 了 ， 
也 是 后 续 其 他 方法 的 实现 基础 ， 它 的 功能 是 创建 一 
个 新 的 Deferred 对 象 ， 并 且 异 步 执行 该 Deferred 对 象 
的 cal 方 法 来 触发 成 功 事 件 。 针 对 运行 环境 的 不 
同 ， 它 提供 了 相应 的 异步 调用 的 实现 方式 并 作出 降 
级 处 理 。 





由 浅 入 深 ， 我 们 先 看 看 使 用 setTimeout 实 现 异 
步 的 Deferred.next_default 方法 (存在 最 小 时 间 


精度 的 问题 ) 。 


Deferred.next_default = function (fun) { 
var d = new Deferred(); 
var id = setTimeout(function () { d.call() }, 0); 
d.canceller = function () { clearTimeout(id) }; 
if (fun) d.callback.ok = fun; 


return d; 





然后 是 针对 nodejs 的 peferred,next_tick 7 


Deferred.next_tick = function (fun) { 
var d = new Deferred(); 
// 使 用 process ,nextTick 来 实现 异步 调用 
process.nextTick(function() { d.call() }); 
if (fun) d.callback.ok = fun; 
return d; 





然后 就 是 针对 现代 浏览 器 的 


Deferred.next_faster_way_Image 方法 。 





Deferred.next_faster_way_Image = function (fun) { 
var d = new Deferred(); 
var img = new Image(); 
var handler = function () { 
d.canceller(); 


d.call(); 


了 
img.addEventListener("load", handler, false); 
img.addEventListener("error", handler, false); 
d.canceller = function () { 
img.removeEventListener("load", handler, false); 
img.removeEventListener("error", handler, false); 








// 请 求 一 个 无 效 data uri scheme 导 致 马 上 触发 1oad 或 error 事 件 

// 注意 : 先 绑 定 事 件 处 理 函数 ， 再 设置 图 片 的 src 是 个 良好 的 习惯 。 因 为 设置 im 
g,src 属 性 后 就 会 马上 发 起 

// 请 求 ， 假 如 读 的 是 缓存 那 有 可 能 还 未 绑 定 事件 处 理 函 数 ， 事 件 已 经 被 触发 了 










































































img.sre = "data:image/png," + Math.random(); 
if (fun) d.callback.ok = fun; 
return d; 


}; 





根据 JSDeferred 官 方 的 数据 ， 用 上 这 个 后 至 少 
比 原 有 的 setTimeout 异 步 方式 快 上 700% 以 上 ， 如 图 
12-5 所 示 。 


图 12-5 





最 后 束 是 针对 IE5.5~IE8 的 Deferred.nextfaster 
way_readystatechange 方 法 。 





Deferred.next_faster_way_readystatechange = ((typeof window === 
‘object') && (location. protocol == "http:") && !window.opera 
&& /\bMSIE\b/.test(navigator.userAgent)) && function (fun) { 
var d = new Deferred(); 
var t = new Date().getTime(); 



























































/* 原理 : 
由 于 浏览 器 对 并 发 请 求 数 作出 限制 (IE5 .5~IE8 为 2~3, IE9+ 和 现代 
浏览 器 为 6) ， 
因此 当 并 发 请 求 数 大 于 上 限时 ， 会 让 请 求 的 发 起 操作 排队 执行 ， 导 致 延 
时 更 严重 了 。 
实现 手段 : 
以 150 毫 秒 为 一 个 周期 ， 每 个 周期 以 通过 setTimeout 发 起 的 异步 执行 
作为 起 始 ， 
周期 内 的 其 他 异步 执行 操作 均 通 过 script 请 求实 现 。 
( 若 该 方法 将 在 短 时 间 内 被 频繁 亩 用， 可 以 将 周期 频率 再 设 高 一 些 ， 如 
100227 ) 
*/ 


if (t - arguments.callee._prev_timeout_called < 150) { 
var cancel = false; 
var script = document.createElement("script"); 


script.type = "text/javascript"; 
// 采用 无 效 的 data uri sheme 马 上 触发 readystate 变 化 
script.src = "data:text/javascript,"; 


script.onreadystatechange = function () { 
// 由 于 在 一 次 请 求 过 程 中 Script 的 readystate 会 变化 多 次 ， 因 此 
通过 cancel 标 识 来 保证 仅 调 
// 用 一 次 call 方 法 
if (!cancel) { 
d.canceller(); 
d.call(); 


























}; 
d.canceller = function () { 
if (!cancel) { 
cancel = true; 
script.onreadystatechange = null; 
document .body.removeChild(script); 


} 
}; 
// 不 同 于 img 元 素 ，script 元 素 需 要 添加 到 dom 树 中 才 会 发 起 请 求 
document .body.appendChild(script); 
} else { 
arguments.callee._prev_timeout_called = t; 
var id = setTimeout(function () { d.call() }, 0); 
d.canceller = function () { clearTimeout(id) }; 




















} 
if (fun) d.callback.ok = fun; 
return d; 


}; 





图 12-6 粗 略 演 示 了 jsDeferred 的 工作 流程 。 


1、 创 建新 的 Deferred 对 象 


2、 异 步 挂 起 代码 


在 Deferred 对 象 的 异步 
链 中 往 下 追加 


非 异 步 代码 


非 异 步 代 码 异步 代码 


图 12-6 


12.4 jQuery Deferred 4% 


jQuery 的 异步 模型 是 从 jQuery 1.5 开 始 搞 的 ， 那 
时 Promise 还 没有 定稿 ， 因 此 jQuery 的 Promise 与 现 
在 的 很 不 一 样 。 它 最 底层 是 一 个 叫 Callbacks 的 对 
象 ， 实 际 上 就 古 一 个 特殊 的 列表 ， 可 以 轻松 实现 观 
穴 者 的 功能 。 然 后 3 个 Callbacks 合 成 1 个 Deferred， 
外 加 1 个 when 函 数 ， 束 是 实现 JSDeferred 那 种 并 归 多 
个 异步 操作 的 效 末 。 当 时 马上 束 投 入 Ajax 模块 的 改 
造 ， 芯 即 让 此 模块 难 谈 十 倍 以 上 。 




















但 推出 以 来 ， 它 一 直 补 雪藏 看 ， 没 有 在 文档 中 
露脸 ， 直 到 jQuery1.52 正 式 独 立成 一 个 模块 。 
Deferred 模 块 是 当时 最 难 读 的 代码 ， 因 为 Promise 本 
来 焉 是 一 个 很 学 术 性 的 东西 ， 接 口 没 有 固化 一 下 ， 
Deferred 那 些 reject、resolve、then、pipe 方 法 名 ， 让 
人 撞 不 着 头脑 ， 如 果 把 reject 更 名 为 fireError， 


resolve 更 名 为 fireSuccess， 其 受众 面 更 些 。 





如 果 深 究 Deferred 的 实现 ， 它 与 JSDeferred 差 不 
多 ， 将 一 个 个 异步 操作 封装 成 一 个 个 对 象 ， 然 后 设 
法 连 在 一 起 。 为 了 保证 外 界 不 改变 其 状态 ，jQuery 
更 是 使 用 闭 包 ， 将 状态 封闭 起 来 ， 只 有 通过 几 个 特 
别 方法 (resolve、reject) 才能 修改 它 。 一 旦 修改 ， 
IR MIRA WIA FY PE. KH E i Promise ki yy HY 
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由 于 先 于 Promise 规 范 形 成 ， 它 与 真正 Promise 
是 有 差异 的 。 规 范 中 ， 只 有 一 个 Promise 对 象 。 而 
jQuery 是 通过 Deferred 与 Promise 两 个 对 象 实现 的 。 
经 党 跑 到 你 眼前 的 是 Deferred， 它 能 同时 添加 各 种 
回调 与 触发 各 种 回调 。 此 外 ， 还 有 一 个 叫 promise 的 
对 象 ， 它 是 Deferred 的 某 些 API 产 生 的 对 象 ， 看 起 来 
能 实现 jQuery 的 链 式 操作 。 但 jQuery 的 链 式 操作 总 
是 返回 jQuery 对 象 ， 而 那些 方法 则 是 生成 promise 对 
象 ， 它 是 一 个 只 读 的 Deferred， 只 能 添加 回调 ， 不 
能 触发 回调 执行 。 换 言 之 ， 它 们 不 能 修改 异步 操作 























的 状态 。 并 且 ， 同 一 个 Deferred 对 象 的 链 式 操作 API 
总 是 返回 同一 个 promise。John Resig 认 为 这 样 更 节 
能 ， 封 到 性 更 好 。 其 实 这 违背 了 规范 ，Promise 规 范 
要 求 链 式 操作 API 总 是 产生 一 个 新 的 Promise。 由 于 
时 间 的 错位 ， 我 们 不 能 责怪 John Resig， 但 意味 着 
以 后 为 了 苯 人 循 Promise 标 准 API， 它 的 API 需 要 调整 
Ts 








最 惨 的 API 是 then 方法 ， 一 共 调 整 了 3 次 。 


// version added: 1.5, removed: 1.8 
deferred.then( doneFn, failFn ) 

// version added: 1.7, removed: 1.8 
deferred.then( doneFn, failFn [, progressFn ] ) 


// version added: 1.8 
deferred.then( doneFn [, failFn ] [, progressFn] ) 





后 来 连 他 们 也 不 好 意思 了 ， 于 是 推出 
Deferred.pipe 方 法 。 到 了 jQuery3.0, Deferred.then 又 
再 次 反 客 为 主 ， 成 为 文档 上 推荐 使 用 的 API，pipe 
方法 只 是 留 作 莱 容 用 。 





为 了 方便 学 习 jQuery， 明 日 这 些 API 是 什么 意 
思 ， 我 们 把 它 与 早期 的 Deferred 库 放 在 一 起 ， 束 一 
目 了 然 ， 如 表 12-2 所 示 。 


表 12-2 
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此 外 jQuery 的 还 有 几 个 特别 的 API， 如 表 12-3 上 所 


人 小。 





。 不 改变 当前 状态 的 添加 回调 与 触 友 回调 
Promise/A+ 规 范 正在 密谋 将 progress 与 notify 它 们 
标 谁 化 。 

。 总 是 触发 的 回调 ， 它 们 通过 always 方 法 添加 ， 
Promise/A+ 称 之 为 finally 。 


表 12-3 
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此 外 ， 需 要 提 一 下 then 方 法 ， 它 不 等 同 于 
Promise 的 then， 并 且 它 的 实现 一 直 在 变 ， 因 此 





jQuery 搞 了 一 个 pipe 方 法 来 取 蔡 then。 直 到 jQuery 


3.0, Deferred.then7 3642) Promise.then. 


之 前 说 过 ，jQuery 的 Deferred 是 基于 3 个 
Callbacks。 我 们 粗略 看 一 下 其 结构 。 





$.Deferred = function( func ) { 
var tuples = 
[ "notify", "progress", jQuery.Callbacks( "memory" ), 
jQuery.Callbacks( "memory" ), 2 ], 
[ "resolve", "done", jQuery.Callbacks( "once memory" ), 
jQuery.Callbacks( "once memory" ), ©, "resolved" ], 
[ "reject", "fail", jQuery.Callbacks( "once memory" ), 
jQuery.Callbacks( "once memory" ), 1, "rejected" | 


], 


state = "pending", 
promise = { 
state: function() { 
return state; 
vy 
always: function() { 
deferred.done( arguments ).fail( arguments ); 
return this; 
ya 
"catch": function( fn ) { 
return promise.then( null, fn ); 
vy 
then: function(){ 
上 
when: function(){ 
yy 


promsie: function(){ 


} 


var deferred = {} 
promise.promise( deferred ); 
return deferred 


Pe 
简单 转换 一 下 ， 其 他 相当 于 。 





var resolveCb = jQuery.Callbacks("once memory"); 
var rejectCb jQuery.Callbacks("once memory"); 
var notifyCb jQuery.Callbacks("memory"); 


resolveCb.add 
resolveCb. firewith 
resolveCb. firewith.bind(this) 


done 
resolvewith 
resolve 


fail rejectCb.add 
rejectWith rejectCb.firewith 
reject rejectCb.firewith.bind(this) 


progress = notifyCb.add 
notifywith = notifyCb.firewith 
notify = notifyCb.fireWith.bind(this) 





Callbacks 合 并 Deferred 后 ， 其 一 些 API 还 可 以 继 
续 使 用 。 





var dd = $.Deferred(); 

dd.done(function (name) { 
console.log(name, 1); 

}).done(function (name) { 
console.log(name, 2); 

p; 

dd.resolve(' 标 准 API ' ) ; 

// 其 实 就 相当 于 

resolveCb.add(function (name) { 
console.log(name, 1); 

}).add(function (name) { 
console.log(name, 2); 


}); 


resolveCb.fire('%&MAPI'); 








当 Deferred 执 行 完 resolve 以 后 ， 同 时 会 调用 
rejectCb.disable 和 notifyCb.lock。 当 Deferred 执 行 完 
reject 以 后 ， 同 时 会 调用 resolveCb.disable 和 
notifyCb.lock。notifyCb 束 是 一 个 单纯 的 





$.Callbacks， 但 是 它 的 状态 会 受到 resolve/reject 的 影 


啊 。 


resolveCb#llrejectCb W r < IB] 248 EBR I ANY, 
一 旦 两 者 中 的 某 一 个 fire 了 ， 男 一 个 束 会 被 disable。 
通过 这 种 方式 来 达到 唯一 状态 。 











最 后 看 一 下 jQuery Deferred 与 ES6 Promise 的 区 
别 ， 其 实 最 开始 浏览 器 厂商 也 打算 抄 jQuery 的 
API， 最 后 被 CommonJS 那 帮 人 压制 住 了 ， 变 成 现 
在 这 个 模型 。 


//jQuery 


var deferred = $.Deferred(); 

var promise = deferred.promise(); 

//Promsie 浏 览 器 早期 内 置 版 本 

var deferred2 = Promise.defer(); 

var promise2= defered.promise; 

//es6 标 准 化 的 Promise 

var promise3 = new Promise(function( resolve, reject){}) 


console.log(deferred, promise) 
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由 于 jQuery 的 异步 模型 市 了 “大 多 私 货 *"， 因 此 
不 再 浪费 笔 淖 研究 它 了 ， 但 它 的 确 为 大 从 接受 
Promsie 做 了 许多 前 期 宣传 工作 。 当 Promsie 被 浏览 
器 内 置 时， 前 闯 开 及 人 员 已 经 用 它 得 心 应 手 了 。 


12.5 es6 Promise 第 一 个 标准 模型 


Promise 在 2014 年 4 月 率先 被 Firefox 29 实 现 ， 紧 
接着 Chrome 32、 微 软 Edge 都 文 持 原生 Promise。 当 
然 ， 在 此 之 前 ，Node.js0.12 层 已 经 直接 支持 ， 异 步 
的 需求 在 后 端 更 为 强劲 。Promise 是 JavaScript 第 一 
个 标准 的 异步 模型 。 受 到 这 到 舞 ， 浏览 器 一 些 新 


API 也 使 用 Promise 实 现 。 


e Battery API. 

e fetch API (XMLHttpRequest 的 取代 者 ) 。 
e ServiceWorder API. 

e await/async 的 内 部 实现 。 





Promise 是 一 个 包含 传递 信息 与 状态 的 对 象 ， 
拥有 以 下 两 个 特点 。 





C1) 对 象 的 状态 不 党 外 界 影响 。Promise 对 象 


代表 一 个 异步 操作 ， 有 3 种 状态 : Pending (进行 
H) 、Resolved《〈 已 完成 ， 又 称 Fulfilled) 和 
Rejected( 己 失败 )。 只 有 异步 操作 的 结果 ， 可 以 
决定 当前 是 哪 一 种 状态 ， 任 何其 他 操作 都 无 法 改变 
这 个 状态 ， 如 图 12-7 所 示 。 








(2) 一 旦 状态 改变 ， 束 不 会 再 变 ， 任 何 时 候 
都 可 以 得 到 这 个 结果 。Promise 对 象 的 状态 改变 ， 只 
有 两 种 可 能 : 从 Pending 变 为 Resolved 和 从 Pending 变 
为 Rejected。 只 要 这 两 种 情况 肥 生 ， 状 态 束 凝固 
了 ， 不 会 再 变 了 ， 会 一 直 你 持 这 个 结果 。 束 算 改 变 
已 经 发 生 了 ， 你 再 对 Promise 对 象 添 加 回调 函数 ， 也 
会 立即 得 到 这 个 结果 。 这 与 事件 Event) 完全 不 
同 ， 事 件 的 特点 是 ， 如 采 你 错过 了 和 它 ， 再 去 监听 ， 
是 得 不 到 结果 的 。 














有 了 Promise 对 象 ， 束 可 以 将 异步 操作 以 同步 
操作 的 流程 表达 出 来 ， 避 人 免 了 层 层 舱 僚 的 回调 函 





数 。 


Promise 在 前 端 主要 是 解决 Ajax 的 异步 问题 ， 主 
要 有 3 种 情况 。 


(1) 由 于 Ajax 是 异步 的 ， 所 有 依赖 Ajax 返回 

结果 的 代码 必需 写 在 Ajax 回调 函数 中 。 这 就 不 可 吉 

倪 地 形成 了 骨 套 ，Ajax 等 异步 操作 越 多 ， 风 套 层次 
束 会 越 深 ， 代 人 码 可 读 性 就 会 越 差 。 
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图 12-7 


$.ajax({ 
url: url, 
data: dataObject, 
success: function(){ 
console.log("I depend on ajax result."); 


error: function(){} 


}); 


console.log("I will print before ajax finished."); 





(2) SUN m RKA, Jain Ne 
一 个 接口 帮 我 们 搞定 ， 需 要 从 A 接 口 得 到 一 部 分 数 
据 ， 然 后 再 根据 A 数据 的 某 个 属性 再 从 B 接 口 得 到 
剩 下 的 数据 。 更 有 甚 者 ， 还 有 取 C 接 口 、D 接 口 
的 ， 因 此 会 造成 Ajax 的 回调 里 套 着 男 一 个 Ajax， 一 








层 层 下 去 就 诞生 著名 的 回调 地 狱 问题 ， 如 图 12-8 所 
不 。 





图 12-8 


$.ajax({ 
url: url, 
success: function(data) { 
$.ajax({ 
url: url2, 
data: data, 
success: function(data) { 
$.ajax({ 


LF sia 





(3) 某 个 操作 ， 必 须 等 于 前 面 两 个 Ajax 回来 
才能 执行 。 比 如 说 ， 一 个 要 请 求 模板 ， 另 一 个 要 请 
求 数据 。 这 副 使 程序 员 目 己 写 计时 匿 ， 回 来 一 个 就 
减 1， 等 于 0 时 执行 最 后 的 回调 。 


function loadImg(url, cb) { 
var img = new Image(); 
img.src = url; 
img.onload = cb; 


J 


function loadImages(urlArr, afterAllLoadedFunc) { 
var count = urlArr.length; 
var loadedCount = 0; 


for (var i = count - 1; i >= 0; i--) { 
loadImg(urlArr[i], function () { 
loadedCount += 1; 
if (count === loadedCount) { 
afterAllLoadedFunc(); 


loadImages(['./xx.jpg', './yy.jpg', './zz.jpg'], function () { 
alert('all imgs have been loaded'); 


}); 





精简 一 下 ， 可 以 描述 为 。 


(1) 处 理 异 步 回 调 。 





(2) 多 个 异步 回调 的 串 行 处 理 。 
(3) 多 个 异步 回调 的 并 行 处 理 。 


首先 Promise 的 API 是 链 式 ， 所 有 同步 的 代码 ， 
可 以 写 到 其 then 方 法 中 。 


var promise = new Promise(function (resolve, reject) { 

console.log('begin do something'); 

if (Math.random() * 10.0 > 5) { 
console.log(" run success"); 
resolve( );// 正 常 执 行 

} else { 
console.log(" run failed"); 
reject();// 发 生 异 常 时 








}); 


promise.then(function () { 
console.log(' resolve from promise'); 
}, function () { 


console.log(' reject from promise'); 


}); 





执行 结 =e 


begin do something 
run Success 
resolve from promise 





执行 结果 二 : 


begin do something 
run failed 
reject from promise 





让 值 在 多 个 回调 里 进行 流水 化 处 理 。 


function double(value) { 
return value * 2; 
} 
function increment(value) { 
return value+9 
} 
function output(value) { 
console.log(value);// => (1 + 9) * 2 
} 


var promise = Promise.resolve(1); 
promise 
. then(increment ) 
. then(double) 
. then(output ) 
.catch(function(error) { 
console.error(error); 


}); 





处 理 Ajax 回 调 。 





function get(url) { 
// Return a new promise. 
return new Promise(function(resolve, reject) { 


// Do the usual XHR stuff 
var req = new XMLHttpRequest(); 
req.open('GET', url); 


req.onload = function() { 
// This is called even on 404 etc 
// so check the status 
if (req.status == 200) { 
// Resolve the promise with the response text 
resolve(req.response); 


else { 
// Otherwise reject with the status text 
// which will hopefully be a meaningful error 
reject(Error(req.statusText) ); 
} 
}; 


// Handle network errors 
req.onerror = function() { 
reject(Error("Network Error")); 


i 


// Make the request 
req.send(); 
+); 
} 


// Use it! 

get('story.json').then(function(response) { 
console.log("Success!", response); 

}, function(error) { 
console.error("Failed!", error); 


}); 
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回 一 个 Promise。 


function Proi(orderId){ 
return new Promise(function(resolve, reject) { 
setTimeout (function(){ 
var orderInfo = { 
orderId: orderId, 
productIds: ['123', '456'] 


resolve(orderiInfo.productIds) 
}, 300) 
}) 


} 
function Pro2(productIds) { 


return new Promise(function(resolve, reject) { 
setTimeout (function(){ 
var products = productIds.map(function( productId) { 
return { 
productId: productId, 
name: ' 衣 服 ' 
} 
}) 


resolve(products) 
}, 300) 
}) 


} 

// 调 用 

Proi('abci23' ) 

. then(function(productIds) { 
console.log('?mmid',productIds) 
return Pro2(productIds) 

}) 

.then(function(products)t{ 
console.1log(' 丙 品 详情 ', products) 





.catch(function(err){ 
throw new Error(err) 





多 个 异步 回调 的 并 行 处 理 ， 使 用 Promise .all 


， 它 需要 接受 多 个 Promise 作 为 参数 。 


Promise.all([promisei, promise2]).then(function(results) { 


}) 


.catch(function(error) { 


// Both promises resolved 


// One or more promises was rejected 


}); 





如 果 使 用 fetch 来 请 求 数据 ， 它 返回 的 直接 是 带 
数据 的 Promise。 


var request1 fetch('/users.json'); 
var request2 fetch('/articles.json'); 


Promise.all([requesti, request2]).then(function(results) { 
// Both promises done! 


}); 





此 外 还 有 一 个 Promise,race ， 它 相当 于 
JSDeferred 的 earlier。 只 要 有 一 个 Promise 的 状态 被 
改变 ， 即 被 调用 了 resolve 或 reject， 它 就 会 执行 


Promise.race。 





var reqi = new Promise(function(resolve, reject) { 
// A mock async action using setTimeout 
setTimeout(function() { resolve('First!'); }, 8000); 
}); 
var req2 = new Promise(function(resolve, reject) { 
// A mock async action using setTimeout 


setTimeout(function() { resolve('Second!'); }, 3000); 
3); 
Promise.race([reqi, req2]).then(function(one) { 
console.log('Then: ', one); 
}).catch(function(one, two) { 
console.log('Catch: ', one); 


}); 


// From the console: 
// Then: Second! 





更 多 API， 可 以 到 MDN 上 搜 ， 总 共 就 reject、 
resolve、then、catch、all、race 这 几 个 方法 ， 与 我 
们 前 几 节 学 到 的 异步 库 的 API 大 同 小 寞 ， 只 是 改 个 
名 而 已 。 


下 面 我 们 来 实现 一 下 Promise。Promise 是 一 个 
通 的 ij 函数 ， 因 此 用 ES3 的 语法 也 能 将 它 实 现 出 
ni FPIS FT FIE6IX FF IA AS ADS a a 


12.5.1 构造 函数 : Promise ( executor ) 


Promise 是 一 个 构造 函数 ， 它 需要 传 入 一 个 


executor 方 法 。 


var nativePromise = window.Promise 
if (/native code/.test(nativePromise)) {// 判 定 浏览 器 是 否 支持 原生 Pro 
mise 
module.exports = nativePromise 
} else { 
var RESOLVED 0 
var REJECTED 1 
var PENDING = 2 





// 实 例 化 Promise 

function Promise(executor) { 
this.state = PENDING 
this.value = undefined 
this.deferred = [] 
var promise = this 


try { 
executor(function (x) { 
promise.resolve(x) 
}, function (r) { 
promise.reject(r) 
}) 
} catch (e) { 
promise.reject(e) 





12.5.2 Promise.resolve/reject 


提供 男 一 种 手段 ， 快 速 实例 化 一 个 Promise， 
并 已 经 传 入 参数 与 触 友 Promise 链 的 执行 。 





Promise.resolve = function (x) { 
return new Promise(function (resolve, reject) { 
resolve(x) 


}) 
} 
Promise.reject = function (r) { 
return new Promise(function (resolve, reject) { 
reject(r) 
}) 





12.5.3 Promise.all/race 


它们 相当 于 JSDeferred 的 parallelearlier， 用 于 
数据 处 理 的 并 发 或 竞争 。 它 们 都 要 求 传 一 个 Promise 
数组 作为 参数 ， 然 后 返回 一 个 新 的 Promise。 





Promise.all = function (iterable) { 
return new Promise(function (resolve, reject) { 
var count = 0, result = [] 
if (iterable.length === 0) { 
resolve(result ) 


} 
function resolver(i) { 
return function (x) { 
result[i] = x // 收 集 所 有 结果 
count += 1 
// 数 量 等 于 传 参 个 数 时 才 执 行 新 生成 的 Promise 
if (count === iterable.length) { 
resolve(result) 











} 


for (var i= 0; i < iterable.length; i += 1) { 
Promise.resolve(iterable[i]).then(resolver(i), rej 
ect) 


}) 


Promise.race 只 要 有 一 个 promise 对 象 进 入 
FulFilled 或 者 Rejected 状 态 的 话 ， 残 会 继续 进行 后 面 
的 处 理 。 换 言 之 ， 谁 的 异步 时 间 最 短 ， 谁 吏 会 被 处 
JHE (i 


Promise.race = function (iterable) { 
return new Promise(function (resolve, reject) { 
for (var i = 0; i < iterable.length; i += 1) { 
Promise.resolve(iterable[i]).then(resolve, reject) 


} 
}) 





12.5.4 Promise#then/catch 


它 的 这 两 个 原型 方法 都 是 用 来 添加 回调 ， 然 后 
返回 新 的 Promise， 伪 装 成 Promise。 








var p = Promise.prototype 
// 构 建 Promise 列 队 , 并 将 要 执行 的 函数 与 传 参 存 储 到 最 初 的 Promise .deferred 数 
组 中 
p.then = function then(onResolved, onRejected) { 
var promise = this 
//onResolved，onRejected 用 于 接受 上 一 个 Promise 的 传 参 














// 它 们 返回 的 结果 ,用 于 resolve，reject 方 法 执行 下 一 个 Promise 
return new Promise(function (resolve, reject) { 
promise.deferred.push([onResolved, onRejected, resolve, 
reject]) 
promise .notify()// 执 行 回调 
}) 


} 
//p .then 的 语法 糖 
p.catch = function (onRejected) { 

return this.then(undefined, onRejected) 
} 








12.5.5 Promise#resolve/reject 


vy 


这 是 框架 自 创 的 方法 ， 用 来 改变 Promise 的 状 
态 ， 规 范 中 没有 。 它 们 最 终 都 调用 Promise#notify。 








p.resolve = function resolve(x) { 
var promise = this 


if (promise.state === PENDING) { 
if (x === promise) { 
throw new TypeError('Promise settled with itself. 
') 
} 


var called = false 
try { 
var then = x && x['then'] 
// 如 果 是 Promise 或 是 thenable 对 象 ， 
// 那 么 将 执行 后 的 结果 继续 传 给 现在 这 个 Promise resolve /rej 








cet 
if (x !== null && typeof x === 'object' && typeof 
then === 'function') { 
then.call(x, function (x) { 
if (!called) { 
promise.resolve(x) 


called = true 


}, function (r) { 
if (!called) { 
promise.reject(r) 


called = true 


}) 


return 


} 
} catch (e) { 
if (!called) { 
promise.reject(e) 


} 

return 
} 
promise.state = RESOLVED 
promise.value = x 


promise.notify() 


j 


p.reject = function reject(reason) { 
var promise = this 


if (promise.state === PENDING) { 
if (reason === promise) { 
throw new TypeError('Promise settled with itself.') 
} 
promise.state = REJECTED 
promise.value = reason 
promise.notify() 





12.5.6 Promsie#notify 


内 部 实现 ， 规 范 并 不 存在 ， 用 于 执行 用 户 回 





p.notify = function notify() { 
var promise = this 
// 根 据 Promise 规 范 , 必须 异步 执行 存储 好 的 回调 
nextTick(function () { 
if (promise.state !== PENDING) {// 确 保 状 态 是 从 pending - 

















> resloved/rejected 
while (promise.deferred.length) { 
var deferred = promise.deferred.shift(), 
onResolved = deferred[0], 
onRejected = deferred[1], 
resolve = deferred[2], 
reject = deferred[3] 


try { 
if (promise.state === RESOLVED) { 
if (typeof onResolved === 'function' ) 
{ 
resolve(onResolved.call( undefined 
, promise.value) ) 
} else { 
resolve(promise. value) 
} else if (promise.state === REJECTED) { 
if (typeof onRejected === 'function' ) 
{ 
resolve(onRejected.call(undefined 
, promise.value) ) 
} else { 
reject(promise. value) 
} 
} 
} catch (e) { 
reject(e) 


12.5.7 nextTick 


内 部 实现 ， 类 似 于 Node.js 的 nextTick 或 
JSDeferred 的 next 方 法 ， 用 于 异步 执行 方法 。 为 发 掘 
最 快 的 异步 方法 ，github 上 还 有 一 个 专门 的 库 ， 叫 


asap 。 


https://github.com/kriskowal/asap 


这 个 库 的 作者 还 搞 了 男 一 个 著名 的 Promise 
库 ， 叫 Q。 在 标准 Promise 没 有 出 来 时 ，Q、when.js 
与 bluebird 并 要 齐 驱 ， 显 赫 一 时 。 





https://github.com/kriskowal/q 
https://github.com/cujojs/when 
https://github.com/petkaantonov/bluebird 





/* 视 浏览 器 情况 采用 最 快 的 异步 回调 */ 
var nextTick = new function () {// jshint ignore:line 
var tickImmediate = window.setImmediate 
var tickObserver = window.MutationObserver 
if (tickImmediate) { 
return tickImmediate.bind(window) 





} 


var queue = [ ] 
function callback() { 
var n = queue.length 
for (var i = 0; i < n; i++) { 
queue[i]() 
} 
queue = queue.slice(n) 


J 


if (tickObserver) { 
var node = document.createTextNode("avalon" ) 
new tickObserver(callback).observe(node, {characterData 
: true}) 
var bool = false 
return function (fn) { 
queue. push(fn) 
bool = !bool 
node.data = bool 


} 


return function (fn) { 
setTimeout(fn, 4) // 标 准 浏 览 器 的 最 小 间隔 数 是 4 





} 





(1) JME: [[Result]]=reason 


>» [[state]]=rejected >o 
(2) 触 友 [[RejectReactions]] 的 操作 。 


触发 [[FulfillReactions]] 和 触发 
[[RejectReactions]] 实 际 束 是 过 历数 组 ， 执 行 所 有 的 





回调 函数 。 


function reject(promise, reason) { 
if (promise. state !== PENDING) { return; } 


promise. state = REJECTED; 
promise._result = reason; 


asap(publish, promise); 





这 残 完 了 ， 大 概 210 行 ， 实 现 标准 Promise 的 所 
有 方法 。 当 然 市 面 上 还 有 其 他 Promise 库 ， 比 如 笔者 
刚才 提 到 的 那 3 个 库 。 如 果 大 家 要 在 后 端 用 
Promise， 建 议 使 用 bluebird。bluebird 有 如 下 优点 。 


(1) 速度 最 快 。 





(2) api 和 文档 完善 ，《 对 各 个 库 文 持 都 不 
fi) a 





(3) 文 持 generator 等 未 来 发 展 趋势 。 


(4) github 活 跃 。 





(5) 能 任意 同化 一 个 对 象 成 为 一 个 类 Promise 
对 象 。 


var Promise = require("bluebird"); 
var fs = Promise.promisifyAll(require("fs")); 


fs.readFileAsync("myfile.json").then(JSON.parse).then( function 
(json) { 

console.log("Successful json"); 
}).catch(SyntaxError, function (e) { 


console.error("file contains invalid json"); 
}).catch(Promise.OperationalError, function (e) { 
console.error("unable to read file, because: ", e.message); 


}); 





如 果 大 家 只 想 一 个 简单 的 Promise， 可 以 试 上 
面 的 mmPromise、ypromise、native-promise-only 或 


者 这 个 靠 名 字 吃 饭 的 es6-promise。 


https://github.com/RubyLouvre/mmDeferred 
https://github.com/yahoo/ypromise 
https://github.com/getify/native-promise-only 


https://github.com/stefanpenner/es6-promise 





ASTRA EAE, QU SR ABV A SH fe Promise 
可 以 看 一 下 native-promise-only 的 作者 写 的 系列 文 


ik 


《[ 译 ] 深 入 理解 Promise 五 部 曲 : 1. 异步 问 
题 》 


《[ 译 ] 深入 理解 Promise 五 部 曲 : 2. 控制 权 转 
fe |r jel) 


《[ 译 ] 深入 理解 Promise 五 部 曲 : 3. 可 靠 性 问 


jel) 
《[ 译 ] 深入 理解 Promise 五 部 曲 : 4. 扩展 问 
jel) 


《[ 译 ] 深入 理解 Promise 五 部 曲 : 5. LEGO) 


扩展 阅读 : 


https://zhuanlan.zhihu.com/p/23312442 
https://segmentfault .com/a/1190000005051034 


12.6 es6 生 成 器 过 渡 者 


Generator Function 〈 生 成 器 函数 ) 和 
Generator 〈 生 成 器 ) 是 es6 引 入 的 新 特性 ， 该 特性 
早 就 出 现在 了 Python、C# 等 其 他 语言 中 。 生 成 器 本 
m Ee RE RE IS AAS 





Generator Á AAS St iterator MAS, PRBS TT 
到 yield 时 退出 ， 并 保留 上 下 文 ， 在 下 次 进入 时 可 以 
继续 运行 


生成 器 函数 也 是 一 种 函数 ， 语 法 上 仪 比 普通 
function 多 了 个 星 号 ， 即 function， 在 其 函数 体内 部 
可 以 使 用 yield 和 yield 关键 字 。 








function* foo1() 
function *foo2() 
function * foo3() { }; 


{ }; 
{ }; 


fooi.toString(); // "function* foo1() { } 
foo2.toString(); // "function* foo2() { }" 
foo3.toString(); // "function* foo3() { } 
fooi.constructor; // function GeneratorFunction() { [native cod 


e] } 


调用 生成 器 函数 会 产生 一 个 生成 器 
(generator) 。 生 成 句 拥 有 的 最 重要 的 方法 是 
next()， 用 来 迭代 。 





function* foo() { }; 
var bar = foo(); 
bar.next(); // Object {value: undefined, done: true} 








上 面 第 2 行 的 语句 看 上 去 是 函数 调用 ， 但 这 时 
候 函 数 代码 并 没有 执行 ， 一 直 要 等 到 第 3 行 调用 next 
方法 才 会 执行 。next 方 法 返回 一 个 拥有 value 和 done 
两 个 字段 的 对 象 。 


我 们 可 以 查阅 co 的 源码 ， 看 如 何 判 定 什么 是 生 
BM as AE CAS PRAY o 








// https://github.com/tj/co/blob/master/index.js 
function isGenerator(obj) { 
return 'function' == typeof obj.next && 'function' == typeof 
obj .throw; 
} 


function isGeneratorFunction(obj) { 


var constructor = obj.constructor; 

if (!constructor) return false; 

if ('GeneratorFunction' === constructor.name || 'GeneratorFun 
ction' === constructor.displayName) return true; 

return isGenerator(constructor.prototype) ; 


} 





AE AMG as RA 4 Ay 5 Ea eR AE ANA E, KEN 
AVY FR 35a 


(1) 通过 new 运 算 符 或 函数 调用 的 形式 调用 生 
成 占 函 数 ， 均 会 返回 一 个 生成 占 实 例 。 


(2) 通过 new 运 算 符 或 函数 调用 的 形式 调用 生 
成 占 函 数 ， 均 不 会 马上 执行 函数 体 的 代码 。 


(3) 必须 调用 生成 费 实 例 的 next 方 法 才 会 执行 
生成 占 函 数 体 的 代码 。 





function *enumerable(msg) { 

console. log(msg) 

var msgi = yield msg + ' after ' 

console. log(msg1) 

var msg2 = yield msgi + ' after' 

try{ 
var msg3 = yield msg2 + ‘after' 
console.log('ok') 

}catch(e){ 


console. log(e) 


console.log(msg2 + ' over') 


} 


// 初始 化 迭代 器 

var enumerator = enumerable('hello' ) 

var ret = enumerator.next() // 控制 台 显示 hello, reti({H{value: 'he 
llo after',done: false} 

ret = enumerator.next('world') // 控制 台 显 示 world，ret 的 值 {fvalue 
:'world after',done: false} 

ret = enumerator.next('game') // 控制 台 显示 game，ret 的 值 {value:'ga 
me after',done: false} 

// 抛 出 异常 信息 

ret = enumerator.throw(new Error('test')) 

// 控 制 台 显示 new Error('test') 人 信息， 然后 显示 game over。ret 的 值 为 {done: 
true} 











12.6.1 关键 字 yield 


用 于 马上 退出 代码 块 并 保留 现场 ， 当 执行 友人 代 
器 的 next 函 数 时 ， 则 能 从 退出 点 恢复 现场 并 继续 执 
行 下 去 。 一 旦 在 yield expression Mbt, BRAILES 
调用 生成 器 的 next() 方法 ， 否 则 生成 器 的 代码 将 不 
能 继续 执行 。 





这 使 得 可 以 对 生成 妖 的 执行 以 及 渐进 式 的 返回 
值 进行 直接 控制 。 





下 面 有 两 点 需要 注意 。 


(1) yield 后 面 的 表达 陈 将 作为 欠 代 融 next 函 数 
的 返回 值 。 


(2) 从 代 器 next 函 数 的 入 参 将 作为 yield 有 的 返回 
值 《 有 点 像 运算 人 符 ) 。 





针对 上 面 的 例子 : 


var ret = enumerator.next()// {value: 'hello after',done: false} 
enumerator .next('msg1 result');// 这 时 候 msg1 的 值 是 msg1 result; 





12.6.2 ”yield* 和 和 yield 的 区 别 





yield*， 一 个 可 友 代 对 象 ， 就 相当 于 把 这 个 可 
迭代 对 象 的 所 有 迭代 值 分 次 yield 出 去 。 





yield* ， 表 达 式 本 喘 的 值 束 是 当前 可 迭代 对 象 
TEAR SE FRIN AB IBM Ct tera Ras ET UE 
的 done 属 性 为 true 时 value 属 性 的 值 ) 。 


function* gi() { 
yield 2; 
yield 3; 
yield 4; 

} 


function* g2() { 
yield 1; 
yield* g1(); 
yield 5; 


} 


var iterator = g2(); 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 


返回 值 例子 : 


function* g4() { 


yield* [1, 2, 3]; 
return "foo"; 
} 
var result; 
function* g5() { 


result = yield* g4(); 
} 

var iterator = g5(); 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 
console.log(iterator. 


next()); // { 
next()); //7 { 
next()); // 4 
next()); // 4 


value: 
value: 
value: 
value: 


done: false 
done: false 
done: false 
, done: false 
, done: false 


: undefined, done: 


1, done: false } 
2, done: false } 
3, done: false } 
undefined, done: 


Fr 
此 时 g4() 返回 了 { value: "foo", done: true } 


true} 








true 


console.log(result); // "foo" 


yield 的 本 质 是 一 个 语法 糖 ， 底 层 的 实现 方式 便 
是 CPS 变 换 6。 也 就 是 说 ，yield 是 可 以 用 循环 和 递归 
重新 实现 的 ， 根 本 用 不 着 一 定 在 V8 层面 实现 。 但 笔 
者 认为 ， 纯 JavaScript 实 现 的 “yield” 会 造成 大 量 的 挫 
栈 消耗 ， 在 性 能 上 至 无 优势 可 言 。 从 性 能 上 考虑 ， 
V8 可 以 优化 yield 的 编译 ， 实 现 更 高 性 能 的 转换 。 




















12.6.3 ”异常 处 理 





可 以 通过 throw 抛 出 异常 ， 在 外 层 直 接 try 


catch。 





function *foo() { 


try { 
yield 2; 


catch (err) { 
console.log( "foo caught: " + err ); 


} 
yield; // pause 


// now, throw another error 
throw "Oops!"; 


} 


function *bar() { 


yield 1; 


try { 
yield *foo(); 


catch (err) { 
console.log( "bar caught: " + err ); 


var it = bar(); 

it.next(); // { value:1, done:false } 

it.next(); // { value:2, done:false } 

it.throw( "Uh oh!" ); // will be caught inside foo() 

// foo caught: Uh oh! 

it.next(); // { value:undefined, done:true } --> No error here! 
// bar caught: Oops! 





(EHE hc ae Ab SL TA eZ tg OK, EL Promise 





//es6 代 码 
let makeAjaxCall = (url) => { 
return new Promise((resolve, reject) => { 
// do some ajax 
resolve(result ) 


}) 
} 


makeAjaxCall('http://ur11' ) 

. then( JSON. parse) 

.then((result) => makeAjaxCall('http://url2?q=${result. quer 
yt')) 

. then( JSON. parse) 

.then((result) => makeAjaxCall('http://url3?q=${result.quer 


y}')) 


这 是 通过 链 式 API 将 异步 代码 改 为 同步 代码 。 


let makeAjaxCall = (url) => { 
// do some ajax 
iterator.next(result ) 


3 


function* requests() { 
let result = yield makeAjaxCall('http://ur11') 
result = JSON.parse(result) 
result = yield makeAjaxCall('http://ur12?q=${result.query}' 


result JSON.parse(result) 
result yield makeAjaxCall('http://ur13?q=${result.query}' 


let iterator = requests() 
iterator.next() // get everything start 








如 果 改 成 生成 器 的 方式 ， 则 更 加 直观 。 但 是 有 
没有 办 法 将 最 后 一 个 next 调 用 呢 ? 





let makeAjaxCall = (url) => { 
return new Promise((resolve, reject) => { 
// do some ajax 
resolve(result ) 


}) 
} 


let runGen 
let it 


(gen) => { 
gen() 


let continuer = (value, err) => { 
let ret 


try { 

ret = err ? it.throw(err) : it.next(value) 
} catch (e) { 

return Promise.reject(e) 


} 


if (ret.done) { 
return ret.value 


} 


return Promise 
.resolve(ret.value) 
.then(continuer) 
.catch((e) => continuer (null, e)) 


} 


return continuer () 


} 


function* requests() { 
let result = yield makeAjaxCall('http://ur11') 
result = JSON.parse(result) 


result yield makeAjaxCall('http://url2?q=${result.query}' 
) 

result = JSON.parse(result) 

result = yield makeAjaxCall('http://ur13?q=${result.query}' 
) 
} 


runGen(requests) 





gen.next() 方 法 获取 第 一 个 promise( 见 图 12- 
9) , MRR, iklelpromiseZ§ R. WRI 
未 完成 ， 等 待 当前 promise 状 态 转 化 后 ， 获 取 下 一 个 


promise， 然 后 递归 调用 即 可 。yield 的 作用 只 是 实现 
目 动 promise 链 式 调 用 的 接口 ， 不 用 人 为 的 书写 then 
方法 。 这 个 也 是 co 的 设计 思路 ! 











Project.reject (value) 


Promise.resolve (ret. value) Project.resolve (value) 





图 12-9 


在 本 书写 完 之 前 ， 生 成 器 的 文 持 情况 还 是 相当 
糟 ， 需 要 通过 编译 来 使 用 。 此 外 ， 它 本 来 的 概念 
太 复 杂 ， 因 此 原 定 于 es7 的 async function 很 快 地 推出 
KREG 








12.7 es7 async/await 终 极 方案 


GeneratorH) BAIA Tas, CAB RAE 
为 流程 控制 而 生 的 ， 所 以 co 的 出 现 只 是 解决 了 这 个 


问题 。 
可 是 ， 你 不 觉得 奇怪 吗 ? 为 什么 非 要 加 个 co， 


才能 好 好 的 玩 变 ? 为 什么 不 能 是 直接 融 可 以 执行 ， 
并 且 效 果 和 co 一 样 的 呢 ? 





async/await 就 是 这 样 被 摘出 来 的 ， 很 多 人 认为 
它 是 异步 操作 的 终极 解决 方案 。 


await 的 3 种 可 能 情况 。 
(1) await + async 国 数 。 
(2) await + Promise. 


(3) await + co (co 会 返回 Promise， 这 样 可 以 


Yieldable, ERRAK, WAGE) 。 


前 2 种 是 比较 党 用 的 ， 第 3 种 co 作为 promise 生 成 
一 种 hack 的 办 法 。 


我 们 比较 一 下 await 与 生成 器 的 用 法 。 


function* gen() { 
var r1 = yield $.get('‘urli'); 


var r2 = yield $.get('‘url2'); 
var r3 = 


yield $.get('url3'); 
console.log(ri, r2, r3); 





然后 ， 我 们 需要 写 一 个 启动 器 来 启动 这 个 函 
数 。 而 采用 async 写 ， 代 人 码 如 下 。 


async function gen() { 

var ri = await $.get('urli'); var r2 = await $.get('url2'); 
var r3 = await $.get('url3'); 

console.log([ri, r2, r3].join('\n')); } 


gen(); // 直接 运行 即 可 








直接 运行 ， 无 顷 写 生成 器 来 运行 ， 而 代码 仅仅 
是 * 改 为 async, yield W await 而 已 。 





所 以 本 质 上 讲 ，async 就 是 生成 的 语法 糖 。 





BAILS NASM”, Wha AE BEE 
forEach, map 之 类 的 方法 里 处 理 ， 否 则 会 报错 或 者 
得 到 错误 的 结 











unction sleep(t) { 
return new Promise(resolve => setTimeout( _ => { resolve(+new 
Date) }, t)) 


async function run() { 
// 顺序 
let a await sleep(100) 


await sleep(200) 


let c = await Promise.all([sleep(100), sleep(200), sleep(300) 


// 并 发 2 

let d = await Promise.all([100, 200, 300].map(t => sleep(t))) 
// 并 发 3 

let list = [sleep(100), sleep(200), sleep(300) | 

let e= [] 


for (let fn of list) { 
e.push(await fn) 


} 


console.log( 


'a a a, '\n', 
'b:', b, '\n', 
Or so C ONN 
'd:', d, '\n', 
'e:', e, '\n'! 


run() 

// a: 1468317737179 

// b: 1468317737384 

// c: [ 1468317737485, 1468317737589, 1468317737688 |] 
// d: [ 1468317737792, 1468317737890, 1468317737989 | 
// e: [ 1468317738094, 1468317738193, 1468317738293 |] 





异种 处 理 





Node.js 里 关于 异常 处 理 有 一 个 约定 ， 即 同步 代 
人 码 采 用 try/catch， 非 同步 代码 采用 error-first 方 式 。 
对 于 async 函 数 来 说 ， 它 的 await 语 句 是 同步 执行 
的 ， 所 以 最 正音 的 流程 处 理 是 采用 try/catch 。 


语句 捕获 ， 和 generator/yield 是 一 样 的 。 下 面 的 
代码 所 展示 的 是 通用 性 的 做 法 。 


try { 
console.log(await asyncFn()); 
} catch (err) { 
console.error(err); 


} 





async/await 总 结 如 下 。 


(1) async 函 数 语义 上 非常 好 ， 让 异步 编程 更 
加 的 同步 了 。 


(2) async p fi Bes, CAD ASAT HE 
JJ, AMGGenerator. 


(3) async 函 数 的 异常 处 理 采 用 try/catch 和 
Promise 的 错误 处 理 ， 非 钊 强大 。 


(4) await#Promise, Promise A 5 Wt 1% xt 
所 有 流程 了 。 
(5) await 释 放 Promise 的 组 合 能 力 ， 外 加 


Promise 的 then， 基 本 无 政 。 


Node.js 中 同样 近似 于 async/await 方 式 的 还 有 
asyncawait 库 ， 它 不 依赖 generator 而 是 依赖 于 node- 
fiber， 看 名 字 大 概 束 是 Node 里 的 一 个 纤 程 的 实现 


吧 。 


https://github.com/yortus/asyncawait 





12.8 总结 


ES6HJ Generator eA SM BT IA TR 
器 ， 但 jj 觉得 它 可 以 用 于 流程 控制 ， 于 是 就 有 了 
co，co 的 历史 可 以 说 经 历 了 目前 所 有 的 流程 控制 方 
案 ， 而 且 由 于 文 持 Generator 和 yield 瓯 导致 
yieldable. 


yieldable 本 来 是 没有 这 个 词 的 ， 因 为 在 
Generator 里 可 以 是 yield 关 键 词 ， 而 yield 后 面 接 的 有 
5 种 可 能 ， 故 而 把 这 些 可 以 yield 接 的 方式 成 为 
yieldable， 即 可 以 yield 接 的 。 


(1) Promises. 
(2) Thunks (functions). 


(3) array (parallel execution). 


(4) objects (parallel execution). 
(5) Generators and GeneratorFunctions. 


这 里 笔者 把 co 和 promise 做 了 人 简单 的 关联 ， 同 时 
区 分 Yieldable 里 的 并 行 和 顺序 执行 处 理 方 式 ， 以 便 
大 家 能 够 更 好 地 理解 co 和 Yieldable， 如 图 12-9 所 
示 。 
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e ° Thunks 
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图 12-10 





O 


° array 
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无 论 是 哪 种 ， 它 们 其 实 都 可 以 是 Promise， 而 
既然 是 Thunk 对 象 ， 它 们 就 可 以 thenable， 而 co v4.6 
版 本 的 执行 的 返回 值 就 是 Promise， 人 至 此 完成 了 左 侧 
闭环 。 人 至 于 Generator 和 GeneratorFunction 就 要 从 
yield 和 yield* 讲 起 ， 在 koa 1.x 和 2.x 里 有 明显 的 应 
用 。 








最 关键 的 是 ，Generator 是 用 来 计算 的 迭代 器 ， 
它 是 过 渡 性 的 产物 。yiedable 足 够 强大 ， 只 是 学 习 











IMASTA tay, SEARED OR thy HEE EERE 
综 上 所 述 ， 可 以 得 出 以 下 结论 。 
(1) Async 国 数 是 趋势 。 


(2) Async 和 Generator 函 数 里 都 文 持 
promise， 所 以 promise 是 必须 会 的 。 


(3) Generator 和 yield 异 和 常 强 大 ， 不 过 不 会 成 
为 主流 ， 所 以 学 会 基本 用 法 和 promise 束 好 了 ， 没 必 
要 所 有 的 都 必须 会 。 


(4) co 作为 Generator 执 行 器 是 不 错 的 ， 它 更 
好 的 是 当做 Promise 包装 器 ， 通 过 Generator 支 持 
yieldable， 最 后 返回 Promise。 


经 过 Callbacks, Promise, Generator, 
async/await，JS 精 英 们 终于 造 出 了 一 种 基于 共享 内 
存 模型 的 伪 线 程 模型 ， 如 图 12-10 所 示 。 





Callback 


Thunk 


Generator 


await Ee 





图 12-11 
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前 并 与 后 问 进 行 交 互 的 方式 有 许多 种 ， 比 如 和 直 
接 通 过 地 址 栏 请 求 页 面 、script 节 点 加 载 脚本 以 及 
XMLHttpRequest 对 象 进行 更 可 控 的 数据 加 载 。 尤 其 
是 XMLHttpRequest 对 象 ， 它 这 来 的 Ajax 无 颖 刷新 ， 
直接 焕发 JavaScript 的 “第 2 春 ”， 让 前 端 癌 富 应 用 发 
展 。 在 许多 框架 与 类 库 中 ， 作 者 都 是 把 基于 script 节 
点 的 JSONP 作 为 Ajax 的 补 序 ， 放 在 一 起 的 。 本 草 也 








不 例外 ， 还 会 介绍 一 下 基于 iframe 的 文件 上 传 。 


13.1 Ajax re 


var xhr = new (self.XMLHttpRequest || ActiveXobject)("Microsoft 
. XMLHTTP") 
xhr.onreadystatechange = function() {// 先 绑 定 事件 后 open 
if (this.readyState === 4 && this.status === 200) { 
var div = document.createElement ("div"); 
div.innerHTML = this.responseText; 
document .body.appendChild(div) 





} 


xhr.open("POST", "/ajax", true); 

// 必 须 ,用 于 让 服务 器 端 判断 request 是 Ajax 请 求 ( 异 步 ) 还 是 传统 请 求 ( 同步 ) 
xhr.setRequestHeader("X-Requested-with", "XMLHttpRequest" ) 
xhr.send("key=val&key1=val2"); 











这 是 一 个 完整 的 Ajax 程序 ， 包 括 跨 平 台 取 得 
—— 绑 定 事件 回调 ， 判 定 处 理 状 
态 ， 及 出 请 求 ， 设 置 首 部 ， 以 及 在 POST 请 求 时 ， 
通过 send 方 法 发 送 数据 。 上 面 7 个 步骤 每 一 步 都 有 
He AS VE [a] ea EAS, OR ak, IE8 
可 能 比 XDomainRequest 更 为 方便 。 


13.2 ”优雅 地 取得 XMLHttpRequest 对 象 


Ajax 的 核心 就 是 XMLhttpRequest 对 象 ， 以 前 ， 
人 们 还 花 大 精力 用 iframe 来 模拟 它 ， 但 现在 可 以 不 
管 了 。 在 IE5 时 ， 微 软 用 一 个 ActiveXObject 对 象 来 
加 载 数 据 ， 并 且 在 数据 返回 时 不 会 导致 地 址 栏 跳 转 
和 页 面 刷新 。 际 此 以 外 ， 微 软 的 ActiveXObject 还 可 
以 做 许多 事情 ， 比 如 创建 一 个 HTML 页 面 或 XML 文 
档 ， 解 析 XSLT， 外 挂 Windows 的 日 历 ， 拖 动 条 什 
么 。 因 此 要 知道 这 个 ActiveXObject 是 干什么 用 ， 必 
须 传 参 。 像 XMLhttpRequest 这 样 重要 的 对 象 ， 在 其 
及 展 过 程 中 ， 一 直面 临 外 界 的 剧烈 竞争 ， 因 此 它 也 
不 断 升 级 ， 这 些 版 本 号 与 名 字 连 在 一 起 ， 组 成 参数 
传 入 ActiveXObject 才 能 正确 生成 XMLhttpRequest。 
但 它们 之 间 没 有 什么 规则 ， 
Msxml2.XMLHTTP.6.0. Msxml2.XMLHTTP.5.0, 
Msxml2.XMLHTTP.4.0. Msxml2.XMLHTTP.3.0, 











Msxml2.XMLHTTP. Microsoft. XMLHTTP, ZANR 
RE CXF PARAFTT A ) SRE ASB ETA 
版 本 ) 。 








毋庸 置 疑 ， 越 新 的 版 本 功能 越 多 ， 因 此 我 们 在 
试验 时 ， 把 最 新 的 版 本 放 在 前 面 。 可 能 微软 最 后 也 
发 觉 这 用 户 体验 太 差 了 ， 也 学 标准 浏览 器 那样 ， 直 
接 提供 一 个 XMLHttpRequest 对 象 给 你 ew， 然 后 内 
部 总 是 对 应 当前 可 用 的 最 新 版 本 。 








IE7 这 个 决定 是 明和 镶 的 ， 但 下 7 在 下 的 发 展 史 ， 
是 个 半成品 ， 这 个 XMLHttpRequest 对 象 也 一 样 不 好 
用 。 它 不 支持 本 地 ile 协议， 会 出 现 拒绝 访问 ， 需 
要 倒退 到 ActiveXObject 对 象 。 如 果 服 务 器 不 发 送 任 
何 header 来 禁止 浏览 器 进行 缓存 的 话 ，IE7 的 
XMLHttpRequest 对 象 可 能 会 缓存 和 重用 对 GET 请 求 
的 啊 应 。 使 用 以 下 的 解决 方式 仍然 会 出 现 该 问题 : 
使 用 POST 方法 、 使 用 随机 的 查询 串 《〈 加 时 间 戳 











等 ) 、 配 置 并 使 服务 器 发 送 某 些 缓存 的 指令 。 注 
意 : 蛙 独 使 用 一 个 非 随 机 的 查询 串 并 不 能 阻止 浏览 
器 进行 缓存 。 此 外 ，IE7 的 XMLHTTPRequest 对 象 
与 标准 浏览 器 的 出 入 还 是 很 大 ， 人 家 有 prototype， 
有 onbort、onload、onerror 方 法 。 它 还 不 是 一 个 


JavaScript 对 象 ， 是 MSXML2.XMLHTTP.3.0 的 外 


pn 


Fear 


TU 0 


如 果 我 们 查看 一 下 各 大 类 库 的 源码 ， 发 现 它 们 
并 没有 全 部 逐一 试验 。 





狂人 QU 本 人 


xhr: function(){ 
return window.ActivexObject ? 
new ActivexXObject("Microsoft.XMLHTTP") : 
new XMLHttpRequest(); 


了 
LL ERE REE EEE EEE EMO O COOLS 1 2 FAIRE ES BERS RRR EERE 


Browser.Request = function(){ 
return $try(function(){ 
return new XMLHttpRequest()j; 
}, function(){ 
return new ActivexObject('MSXML2.XMLHTTP' ); 
}, function(){ 
return new ActivexObject('Microsoft.XMLHTTP' ); 


}); 
7 UCC CCOO UOC CO COO rototyped SLE DF AEE Ae EEE REE EE 


getTransport: function() { 
return Try.these( 


function() {return new XMLHttpRequest()}, 
function() {return new ActivexObject('Msxm12.XMLHTTP' )}, 
function() {return new ActivexObject('Microsoft.XMLHTTP' )} 
) || false; 
ty 





Microsoft.XMLHTTP 是 最 早 的 版 本 ， 
Msxml2.XMLHTTP 是 IE6 的 ， 但 打 了 补丁 后 自然 有 
Msxml2.XMLHTTP.3.0 和 Msxml2.XMLHTTP.4.0， 
Msxml2.XMLHTTP.5.0 不 是 给 浏览 右 使 用 的 ， 属 于 





劳 文 ， 存 在 一 定 的 兼容 问题 。 其 中 5.0 是 为 office 所 
开发 的 ， 甚 至 带 有 一 些 特性 是 后 来 的 6.0 所 没有 的 
(如 Xml 数字 加 密 ) 。 





MSXML 4.0 is a separate download that was 
released by Microsoft in October 2001. The latest or 
current service pack release of MSXML 4.0 is 
available through the Microsoft Web site. MSXML 4.0 
must be installed separately and is not currently 


included with other Microsoft products. MSXML 4.0 


installs side-by-side with earlier versions of MSXML 


without affecting any existing functionality. 


MSXML 5.0 for Microsoft Office Applications is 
only available with current versions of Microsoft 
Office. MSXML 5.0 for Microsoft Office Applications 
installs side-by-side with earlier versions of MSXML 


without affecting any existing functionality. 


Msxml2.XMLHTTP.6.0% © ll ActiveX Object % 
的 XMLHttpRequest 对 象 的 最 高 版 本 。 可 能 大 家 在 网 
上 还 看 到 Msxml2.XMLHTTP.7.0， 很 遗憾 ， 那 只 是 
UWIRE, ER HESAN TFE SRE. 





根据 IE blog 的 建议 ， 应 该 仅 使 用 6.0 和 3.0， 不 
要 使 用 旧 的 microsoft.xmlhttp， 那 它 也 应 该 出 现在 上 
面 的 数组 中 。 此 外 还 有 一 个 
MSXML2.XMLHTTP.2.6， 但 不 知 为 什么 ， 总 之 ， 
如 果 你 的 浏览 器 打 了 某 些 升 级 补丁 ，new 








ActiveXObject (“Msxml2.KMLHTTP”) 调用 的 是 
2.6 或 3.0 版 本 ， 非 常 混乱 。 此 后 的 版 本 ， 才 正确 对 
应 它 的 版 本 号 。 因 此 上 面 没有 列举 
MSsxml2.XMLHTTP.2.6 与 Msxml2. XMLHTTP.3.0 的 
必要 ， 都 给 Msxml2.XMLHTTP 代 表 了 。 








因此 我 们 要 检测 的 ActiveXObject 的 ProgID 收 罕 
为 Msxml2.XMLHTTP.6.0、Msxml2. 
XMLHTTP.3.0、Msxml2.XMLHTTP 与 
Microsoft.XMLHTTP4 个 。 





function xhr() { 
ERG ac ney 
var fns = [ 
function () { return new XMLHttpRequest(); 
function () { return new ActivexObject(' MSxm12. XMLHTTP ); 


function () { return new ActivexObject('Microsoft.XMLHTTP 
'); }, 
]; 
for (var i = 0,n=fns.length; i < n; i++) { 
try { 
fns[i](); 
xhr.cache = fns[i]; 
break; 
}catch(e){} 


return xhr.cache(); 
selse{ 
return xhr.cache(); 


} 
} 
var xhrObject = xhr();// 调 用 
alert(xhrobject) //[object XMLHttpRequest] 





赁 心 而 论 ， 上 面 的 方法 已 经 很 高 效 了 ， 只 判定 
了 一 次 ， 然 后 缓存 生成 方式 。 但 有 没有 更 优雅 的 设 
计 呢 ? 





因为 即便 我 们 缓存 了 生成 方式 ， 每 次 还 要 判断 
一 下 xhr.cache 的 值 。 这 时 用 惰性 函数 处 理 ， 这 是 一 
种 履 写 目 身 的 模式 。 





var xhr = function() { 
var fns = [ 
function () { return new XMLHttpRequest(); }, 
function () { return new ActivexObject('Msxml12.XMLHTTP'); } 


function () { return new ActivexObject('Microsoft.XMLHTTP' ) 


for (var i = 0,n=fns.length; i < n; i++) { 
try { 
fns[i](); 
xhr = fns[i];)/ERKH, #5644 
break; 
}catch(e){} 





return xhr() 





我 们 再 认真 思考 一 下 ， 既 然 我 们 是 写 框 架 ， 那 
么 这 些 检 测 其 实 是 放 在 IIFE 里 面 ， 因 此 基本 不 用 办 
写 ， 检 测 好 哪个 可 用 ， 束 把 它 加 到 命名 空间 上 就 好 
了 。 最 后 的 版 本 束 出 来 了 ， 使 用 new Function, 
eval， 反 正 只 用 一 次 ， 耗 不 了 多 少 性 能 。 





window.$ = window.$ = {} 
var s = ["XMLHttpRequest", "ActivexObject('Msxml2.XMLHTTP.6.0' ) 
"ActivexObject('Msxm12.XMLHTTP.3.0')", "ActivexObject('Msxm 
12.XMLHTTP')"]; 
if (!"1"[0]) {// 判 定 IE67 
s[0] = location.protocol === "file:" ? "I!" : s[O0]; 





for (var i = 0, axo; axo = s[itt+]; ) { 
try { 
if (eval("new " + axo)) { 
$.xhr = new Function("return new " + axo); 
break; 


} 
} catch (e) { 
} 





13.3 XMLHttpRequest 对 象 的 事件 绑 定 
与 状态 维护 


最 早 的 XMLHTTPRequest 对 象 只 有 
onreadystatechange 方 法 ， 然 后 被 标准 浏览 占 抄 来 ， 
在 易 用 性 上 进行 增强 。 前 先 将 XMLHTTPRequest 改 
造成 一 个 事件 派发 者 (EventDispatcher) 。 很 早 以 
前 ， 浏 览 器 只 有 3 种 原生 的 事件 派发 者 ，window 对 
象 、 文 档 对 象 与 元 素 节 上 点。 既然 是 事件 派发 者 ， 孢 
有 addEventListener、removeEventListener、 
dispatchEvent 等 多 投 事 件 API，IE 到 9.0 才 支持 W3C 
那 套 ， 因 此 它 的 XMLHTTPRequest 也 在 IE9 才 有 
addEventListener 这 些 API。 





FLUE, W3CHI AWK — BH ÆFirefox EtL, YZ 
API 都 是 Firefox 搞 出 来 的 ， 在 漫长 的 Firefox3.X 时 
代 ，onload、onerror、onabort、onprogress 这 4 个 方 


法 首先 被 摘出 来 。 其 他 标准 浏览 右 只 是 跟 进 。 微 软 








fEIESA AXDomainRequest#sJllonerror, onload, 
onprogress、ontimeout 这 几 个 事件 ， 或 许 党 得 过 期 
事件 非常 有 用 ，IE8 为 XMLHTTPRequest 多 加 个 
ontimeout 事 件 ，IE9 又 加 个 onabort 事 件 。 


Firefox 在 3.6 开 始 文 持 用 XMLHttpRequest 上 传 
二 进 制 文件 ， 为 此 搞 出 FileReader 对 象 ， 此 对 象 所 
支持 的 事件 类 型 与 后 来 的 XMLHTTPRequest2 的 一 


模 一 样 (onabort、onerror、onload、onloadend、 








onloadstart. onprogress) 。 其 中 onloadend 与 jQuery 
ajax 的 complete 回 调 一 模 一 样 ， 无 论 成 功 与 错误 都 
会 触发 ， 用 于 收尾 工作 非常 适合 。IE10 终 于 把 这 些 
事件 一 口气 实现 了 ， 如 表 13-1 所 示 。 


表 13-1 


























在 请 求 开始 时 触发 














progress 在 请 求 发 送 或 接收 数据 期 间 ， 在 服务 器 指定 的 时 间 间 隔 触发 








em Je 例如 ， 在 调用 abort0) 方 法 时 




















在 请 求 完 成 时 触发 ， 无 论 请 求 是 成 功 还 是 失败 
在 XHR 对 象 的 readyState 值 发 生 改 变 时 触发 


从 实现 角度 来 看 ， 由 于 IE6 一 下 8 的 
XMLHTTPRequest 无 法 进展 原型 ， 我 们 需要 用 包 囊 
的 方式 创建 一 个 伪 XMLHTTPRequest 对 象 ， 在 它 里 
面 操作 原生 对 象 。 对 于 事件 绑 定 ， 为 了 对 同一 种 事 
件 绑 定 多 个 回调 ， 我 们 需要 继承 一 个 自 定义 事件 对 
象 ， 换 言 之 ， 一 个 观察 者 模式 的 东西 。loadstart 残 
是 在 一 开头 执行 ， 没 什么 难度 ， 成 功 与 失败 我 们 可 
以 判定 status 状 态 码 ，ontimeout 可 以 用 setTimeout 实 
现 ，onabort 就 是 一 个 开关 ，loadend 就 是 在 回调 里 肯 









































FESSHUT NTT. HR ze onprogress, EEREN] 
bas PPA Ay DA ae Ss FT Be loaded 5 total 属性 
轻易 计算 得 进度 ， 正 在 readyState==3 时 Content- 
Length 的 值 并 不 可 徘 。 





至 于 请 求 是 成 功 还 是 失败 ， 下 就 要 在 
readystatechange 回 调 中 查看 status 值 与 转换 目标 类 型 
是否 成 功 。 


2xXX 状 态 与 表示 从 缓存 中 直接 取出 的 304 可 以 看 
是 成 功 ， 但 浏览 器 还 是 有 一 些 例外 情况 需要 我 们 注 
意 。 了 下 〈 非 原生 的 XHR 对 象 ) 中 会 将 204 设 置 为 
1223，Opera 会 在 取得 204 时 将 status 设 置 为 0， 而 
Safari 3 之 前 的 版 本 会 将 status 设 置 为 undefined。 最 
终 验 证 请 求 是 否 成 功 的 代码 将 会 是 : 








var ok = ( xhr.status >= 200 && xhr.status < 300 ) || 
xhr.status === 304 || xhr.status === 1223 || xhr.status === 0 





IE 的 1223 请 求 算是 一 个 著名 的 bug， 在 各 大 类 
库 的 bugstack 中 都 有 介绍 


XMLHTTPRequest implementation in MSXML HTTP (at least in IE 8.0 
on Windows XP SP3+) does not handle HTTP responses with status 
code 204 (No Content) properly; the ‘status' property has the 

value 1223. 

dojo - http://trac.dojotoolkit.org/ticket/2418 

prototype - https://prototype.lighthouseapp.com/projects/8886/t 

ickets/129-ie-mangles-http-response- status-code-204-to-1223 


YUI - http://developer.yahoo.com/yui/docs/connection.js.html (h 
andleTransactionResponse ) 

JQuery - http://bugs.jquery.com/ticket/1450 

ExtJS - http://www.sencha.com/forum/showthread.php?85908 - FIXED - 
732-Ext-doesn-t-normalize- IE-s-crazy-HTTP-status-code-1223 





IE 下 甚至 会 返回 5 位 数 的 状态 码 ， 下 面 是 
WinInet 错误 代码 。 


http://support.microsoft.com/kb/193625 


另外 ，Firefox 在 本 地 使 用 XMLHttpRequest 时 , 
成 功 时 status 为 0。 由 于 很 少 在 本 地 发 请 求 ， 因 此 主 
没有 对 它 加 以 处 理 。 这 个 当 作 常 识 ， 目 己 留 
意 一 下 吧 。 





13.4 Kikisk 5 Ah 


XMLHTTPRequest 对 象 发 送 请 求 是 使 用 open 方 
法 ， 在 这 之 前 请 先 绑 定好 各 种 事件 回调 。 





语法 如 下 : 


open(method, url, async, username, password) 


method 参 数 是 用 于 请 求 的 HITP 方 法 。 值 包括 
GET. POST. PUT, DELETE 和 HEAD。 有 的 浏 
览 器 还 允许 你 自 定 义 method， 不 过 要 求全 是 大 写 ， 
比如 IE6、Firefox3 一 Firefox19、Chrome、Opera。 








unl 参数 是 请 求 的 主体 。 大 多 数 浏览 器 实施 了 
一 个 同 源 安 全 集 略 ， 并 且 要 求 这 个 URL 与 包含 脚本 
的 文本 具有 相同 的 主机 名 和 端口 。 在 GET 请 求 ， 我 
们 需要 将 参数 转换 成 querystring 的 形式 放 在 问号 后 








面 。 





async 参 数 指示 请 求 使 用 应 该 异步 地 执行 。 如 
果 这 个 参数 是 false， 请 求 是 同步 的 ， 后 续 对 send0) 
的 调用 将 阻塞 ， 直 到 啊 应 完全 接收 。 如 采 这 个 参数 
是 true 或 省 略 ， 请 求 是 异步 的 ， 且 通 香 需要 一 个 


onreadystatechange 事件 句柄 。 








username 利 password 参 数 是 可 选 的 ， 为 url 所 需 
的 授权 提供 认证 资格 。 如 有 果 指 定 了 ， 它 们 会 覆盖 url 
目 己 指定 的 任何 资格 。 








发 送 数 据 要 用 send 方 法 ， 网 上 通常 教 我 们 在 
POST 请 求 时 发 送 querystring。 后 来 增加 了 
FormData、ArrayBuffer、Blob、Document 这 几 种 数 
据 类 型 。FormData 是 一 个 不 透明 的 对 象 ， 无 法 序列 
化 ， 但 能 简化 人 工 提 交 数 据 的 过 程 。 以 前 ， 我 们 点 
击 按钮 提交 表单 ， 浏 览 器 会 自动 将 这 个 表单 的 所 有 


disabled yfalselJinput. texteara, select. button7t# 





的 name 与 value 抽 取出 来 ， 变 成 一 个 querystring。 当 
我 们 用 Ajax 提交 时 ， 这 个 过 程 就 成 为 人 工 的 。 
jQuery 把 它 抽 象 成 一 个 serialize 方 法 ， 代 人 码 量 不 是 少 
数 。 而 FormData 直 接 可 以 new 一 个 实例 出 来 ， 我 们 
只 需 表 历 表单 元 素 ， 用 append 方 法 传 入 其 name 与 
value#l4T J . 





var formdata = new FormData(); 
formdata.append("name"，" 司 徒 正美 "); 
formdata.append("blog", "http://www.cnblogs.com/rubylouvre/"); 





更 简捷 的 方式 ， 它 本 来 就 可 以 用 getFormData 
生成 ， 并 得 到 此 表单 的 所 有 数据 。 


var formobj = document.getElementById("form"); 
var formdata = formobj.getFormData() 





它 也 可 以 用 传 参 方法 填充 内 容 。 


var formobj = document.getElementById("form"); 
var formdata = new FormData(formobj); 
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var xhr = new XMLHttpRequest (); 
xhr.open("POST", "http://ajaxpath"); 


xhr.send(formData) ; 





如 果 是 document， 束 上 自己 生成 一 个 XML 对 象 发 
上 去 吧 ， 但 我 们 没有 好 的 手段 辨识 浏览 器 是 个 文 持 
send(document)。 对 于 其 他 新 数据 ， 一 般 来 说 ， 只 
要 它们 的 构造 器 是 出 现在 全 局 作用 域 下 的 ， 浏 览 器 
残 已 经 同步 好 send 方 法 了 。 





在 标准 浏览 器 文 持 二 进 制 的 过 程 中 ， 无 市 操 地 
实现 了 各 种 各 样 的 对 象 。 有 的 只 是 县 花 一 现 ， 很 快 
被 废弃 掉 ， 如 BlobBuilder。 剩 下 的 还 有 Blob、 
File、FileReader、FileWriter、BlobURE 及 庞大 的 
TypedArray 家 族 。 





下 面 是 发 送 ArrayBuffer 与 Blob 的 例子 。 


var myArray = new ArrayBuffer(512); 


var longInt8View = new Uint8Array(myArray); 
for (var i = 0; i < longInt8View.length; i++) { 
longInt8View[1i] = i % 255; 


var xhr = new XMLHttpRequest; 

xhr.open("POST", url, false); 

xhr.send(myArray); 

var xhr = new XMLHttpRequest (); 

xhr.open("POST", url, true); 

var blob = new Blob(['abc123'], {type: 'text/plain'}); 
xhr.send(blob); 





Firefox 很 早 以 前 还 实现 了 一 个 私有 的 
sendAsBinary， 可 直接 发 送 二 进 制 数 据 。Chrome 可 
以 用 以 下 方法 模拟 。 


XMLHttpRequest .prototype.sendAsBinary = function(datastr) { 

var bb = new WebKitBlobBuilder(); 

var data new ArrayBuffer(1); 

var ui8a new Uint8Array(data, 0); 

for (var i in datastr) { 

if (datastr.hasOwnProperty(i)) { 

var chr = datastr[i]; 
var charcode = chr.charCodeAt(0) 
var lowbyte = (charcode & Oxff) 
ui8a[0] = lowbyte; 
bb.append(data); 


} 


} 
var blob = bb.getBlob(); 
this.send(blob) ; 





13.5 ”接收 数据 


早期 XMLHTTPRequest 对 象 拥有 两 种 接收 数据 
的 属性 ，responseText 对 应 解码 后 的 字符 串 (默认 
解 公 为 utf-8) ，responseXML 对 应 一 个 XML 文档 ， 
IE 还 支持 第 3 种 ，responseBody 对 应 未 解码 的 二 进 制 
数据 。JSON 传 输 格 式 兴 起 后 ， 我 们 会 对 
responseText 进 行 加 工 ， 用 JSON.parse 得 到 JSON 数 
据 。 至 于 后 病 返 回 什 么 类 型 的 数据 ， 在 项 目 开 发 过 
程 ， 这 个 有 对 应 文档 看 ， 如 果 比 较 莫 催 ， 我 们 还 可 
以 通过 getResponseHeader(“Content-Type”) 得 知 。 











随 大 浏览 右 看 手 对 二 进 制 的 文 持 ， 它 新 增 的 
responseType 和 response 属 性 ， 告 知 浏览 右 我 们 希望 
返回 什么 格式 的 数据 。 


responseType， 在 发 送 请 求 前 ， 根 据 您 的 数据 


需要 ， 将 xhr.responseType 设 置 为 “text” 


“arraybuffer”“blob” 5% “document”. Wit, KE 
(或 忽略 〉xhr.responseType =， 会 默认 将 啊 应 设 
为 “text”。 


response 成 功 发 送 请 求 后 ，xhr 的 啊 应 属性 会 包 
含 DOMString、ArrayBuffer、Blob 或 Document 形式 
(具体 取决 于 responseType 的 设置 ) 的 请 求 数据 。 





适用 范围 : Chrome8~Chrome24, Firefox6~Firefox1i8, IE10. 
var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBui 
lder || window.MSBlob Builder || window.BlobBuilder 
if (!BlobBuilder) { 
console.log("BlobBuilder 已 被 废弃 ") 


xhr = new XMLHttpRequest(); 
img = document.getElementById("img") 
.open('POST', 'image.jpg', true); 
. setRequestHeader ("X-Requested-with", "XMLHttpRequest"); 
.responseType = ‘arraybuffer'; 
.onload = function(e) { 
if (this.status === 200) { 
var bb = new BlobBuilder(); 
bb.append(this.response); 
var blob = bb.getBlob('image/jpeg'); 
img.src = blob; 


} 


.send(); 








var xhr new XMLHttpRequest (); 

var img document .getElementById("img"); 

xhr.open('POST', ‘image.jpg', true); 

xhr.setRequestHeader("X-Requested-wWith", "XMLHttpRequest" ); 

xhr.responseType = 'blob'; 

//https://developer .mozilla.org/zh-CN/docs/DOM/window.URL.creat 

e0bjectURL 

window.URL = window.URL || window.webkitURL; 

img.addEventListener("DOMNodeRemoved", function() { 
window.URL.revokeObjectURL(img.src); 


// 适 用 范围 : Chromei19+, Firefox6, IE10, Operai2,. Safari5 


.onload = function(e) { 
if (this.status === 200) { 
var blob = this.response; 
img.src = window.URL.createObjectURL(blob); 


} 


.send(); 





bap rae 





// 适 用 范围 : Chromei10+, Firefox6, IE10, Operai1.60 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/path/to/image.jpg', true); 
xhr.setRequestHeader("X-Requested-with", "XMLHttpRequest" ) ; 
xhr.responseType = '‘arraybuffer'; 
xhr.onload = function(e) { 
if (this.status == 200) { 

var ulInt8Array = new Uint8Array(this.response); 

var i = uInt8Array.length; 

var binaryString = new Array(i); 

while (i--) { 

binaryString[i] = String. fromCharCode(uInt8Array[i] 





); 
} 


var data = binaryString.join(''); 

var base64 = window.btoa(data); 

document.getElementById("img").src = "data:image/jpeg;b 
ase64," + base64; 


} 


}; 


xhr.send(); 





方法 四 : 





// 适 用 范围 :支持 overrideMimeType 与 btoa 的 浏览 

var xhr = new XMLHttpRequest(); 

xhr.open('POST', 'image.jpg', true); 
xhr.setRequestHeader("X-Requested-wWith", "XMLHttpRequest" ); 

昌 制 浏览 器 将 该 响应 当成 纯 文 本 文件 来 对 待 ， 使 用 一 个 用 


XX 样 就 是 告诉 了 浏览 器 ， 不 要 去 解析 数据 , 直接 返回 未 处 理 过 的 字 节 码 
xhr.overrideMimeType('text/plain; charset=x-user-defined' ) 
xhr.onload = function(e) { 

if (this.status == 200) { 
var responseText = xhr.responseText; 
var responseTextLen = responseText.length; 
var binary = '' 





















































for (var i = 0; i < responseTextLen; i += 1) { 

// 扔 掉 的 高 位 字 节 (f7) 

binary += String.fromCharCode(responseText.charCode 
Oxf Ff); 











var base64 = window.btoa(binary); 
document.getElementById("img").src = "data:image/jpeg;b 
ase64," + base64; 
} 
}; 


xhr.send(); 








btoa 其 实 就 是 一 个 encodeBase64 方 法 。 如 果 浏 





be Dc, YOR OSB, iba Ad ye H E 


三 。 





(function() { 
var chars = 
"ABCDEFGHI JKLMNOPQRSTUVWXYZabcdefghij klmnopqrstuvwxyz0123456789 
+/'.,split(''); 
window.bota = window.btoa || function(str) { 
if (/[4\u0000-\u00fTFI]/.test(str)) { 
throw new Error('encodeBase64 : INVALID _CHARACTER_E 


RR'); 


var hash = chars; 
var i = 2; 
var len = str.length; 
var output = []; 
var link; 
var mod = len % 3; 
len = len - mod; 
for (; i < len; i += 3) { 
output. push( 
hash[(link = str.charCodeAt(i - 2)) >> 2], 
hash[((link & 3) << 4 | ((link = str.charCo 
deAt(i - 1)) >> 4))], 
hash[((link & 15) << 2 | ((link = str.charc 
odeAt(i)) >> 6))], 
hash[(link & 63) ] 


); 


} 
if (mod) { 
output .push( 
hash[(link = str.charCodeAt(i - 2)) >> 2], 
hash[((link & 3) << 4 | ((link = str.charCo 
deAt(i - 1)) >> 4))], 

link ? hash[(link & 15) << 2] + '=' : ‘==! 
); 

} 


return output.join(''); 


} 
P) 


[L SCRE 


下 面 讲解 如 何 对 付 旧 版 本 正 。 正 文 持 两 种 脚本 
语言 ，JavaScript 与 VBScript。JavaScript 不 能 做 的 
事 ，VBScript 可 以 殿后 。 整 个 思路 是 参照 方式 4， 搞 
一 个 类 似 的 Uint8Array 的 东西 出 来 。 


你 可 以 使 用 以 下 两 种 方式 创建 一 个 VBS 的 转换 
pA BL o 





(function() { 
function vbs() { 
/* 


Function BinaryToArray(binary) 

Dim length, array() 

length = LenB(binary) - 1 

ReDim array(length) 

For i = 0 To length 

array(1) = AscB(MidB(binary, i+ 1, 1)) 

Next 

BinaryToArray = array 
End Function 

*/ 

} 

var str = vbs.toString(); 

execScript(str.slice(str.indexof("*") + 1, str.lastIndexOf ( 
aay "VBScript"); 


(function() { 
var str = 
"Function BinaryToArray(binary)\r\n\ 
Dim oDic\r\n\ 
Set oDic = CreateObject("scripting.dictionary" 
y\r\n\ 


length = LenB(binary) - 1\r\n\ 
For i = 1 To length\r\n\ 
oDic.add i, AscB(MidB(binary, i, 1))\r\n\ 

Next\r\n\ 
BinaryToArray = oDic.Items\r\n\ 

End Function' 

execScript(str, "VBScript"); 
DO; 





一 种 是 使 用 多 行 注释 实现 heredocument， 但 
不 防 压 缩 。 第 二 种 为 了 保持 格式 漂 之 加 入 了 许多 至 
日 ， 注 意 不 能 去 挥 后 面 的 换行 符 ， 否 则 解释 错误 。 
通过 BinaryToArray 方 法 得 到 一 个 数字 数组 ， 但 它 是 








一 个 VBScript 对 象 ， 我 们 需要 把 它 放 到 VBArray 构 
造 器 内 ， 转 换 为 真正 的 JavaScript 数 组 。 剩 下 的 处 理 
HAE PEAY I o 





var xhr = new XMLHttpRequest (); 
xhr.open('POST', ‘image.jpg', true); 
xhr.setRequestHeader("X-Requested-wWith", "XMLHttpRequest") ; 
xhr.onload = function(e) { 
if (this.status === 200) { 
var byteArray = new VBArray(BinaryToArray(this.response 
Body)). AT J3 
var n= Dy eA Lay. length; 
var binary = ''; 
for (var i = 0; i < n; i++) { 
// 扎 掉 的 高 位 字 节 (f7) 
binary += String.fromCharCode(byteArray[i] & Oxff); 











var base64 = window.btoa(binary); 


document.getElementById("img").src = "data:image/jpeg;b 
ase64," + base64; 


} 


}; 


xhr.send(); 





13.6 Ek xF 


这 个 与 前 面 提 到 的 传送 数据 有 点 相似 ， 不 过 它 
Sinput[type=file]24 a 1a LA 


假设 页 面 上 有 一 个 ID 为 upload 的 上 传 域 与 一 个 
ID 为 progress 的 用 于 显示 进度 的 SPAN 元 素 ， 那 么 使 
用 XMLHTTPRequest2 来 上 传 文件 是 这 样 实现 的 : 











window.addEventListener("load", function() { 
var el = document.querySelector('#file'); 
var progress = document.querySelector('#progress'); 
el.addEventListener('change', function() { 
var file = this.files[0]; 
if (file) { 
var xhr = new XMLHttpRequest (); 
xhr.upload.addEventListener('progress', function(e) 


























{ 

// eSB AHEM, RAR FAH 

var done = e.position || e.loaded, total = e.to 
talSize || e.total; 


progress.innerHTML = (Math.floor(done / total * 
1000) / 10) + "%"; 
+); 
xhr.addEventListener('load', function() { 
progress.innerHTML = "上 传 成 功 " 
}); 
xhr.open('PUT', '/upload', true); 
xhr.setRequestHeader('X-Requested-with', 'XMLHttpRe 
quest'); 
xhr.setRequestHeader('X-File-Name', encodeURICompon 
ent(file.fileName || file.name)); 


xhr.setRequestHeader('Content-Type', '‘application/o 
ctet-stream'); 
xhr.send(file); 
} 
}) 
}); 





如 果 文 件 很 大 ， 我 们 利用 文件 对 象 的 slice 方 法 
切割 一 下 ， 分 其 上 传 。 





window.addEventListener("load", function() { 
var el = document.querySelector('#file'); 
var progressBar = document.querySelector('#progress'); 
function upload(name, index, file, total) { 
var xhr = new XMLHttpRequest(); 
xhr.addEventListener('load', function() { 
progressBar.innerHTML = "100% 上 传 成 功 "， 


}); 

xhr.open('PUT', '/upload', true); 

xhr .setRequestHeader ('X-Requested-With', 'XMLHttpReques 
t'); 

xhr.setRequestHeader('X-File-Index', index); 

xhr.setRequestHeader('X-File-total', total); 

xhr.setRequestHeader('X-File-Name', encodeURIComponent ( 
name) ); 

xhr.setRequestHeader('Content-Type', '‘application/octet 
-stream'); 

xhr.send(file); 


el.addEventListener('change', function() { 
var blob = this.files[0]; 
var meanSize = 512 * 1024; // 1MB chunk sizes. 
var totleSize = blob.size; 
var start = 0, end = 0; 
var i = 0; 
var name = blob.fileName || blob.name; 
var total = Math.ceil(totleSize / meanSize) 
while (start < totleSize) { 


if ('mozSlice' in blob) { 

var chunk = blob.mozSlice(start, end); 
} else if ("webkitSlice" in blob) { 

chunk = blob.webkitSlice(start, end); 
} else { 

chunk = blob.slice(start, end); 
J 


upload(name, i, chunk, total); 
j++ 

start = end; 

end = start + meanSize; 


}); 
}) 





至 于 旧式 IE， 那 就 没有 办 法 了 ， 需 要 用 到 
iframe 或 人 ash。 不 过 专业 的 上 传 组 件 都 是 混用 多 种 





上 传 手 段 ， 非 党 庞大 ， 笔 者 这 里 不 就 展开 了 。 这 里 
和 微 列 出 笔者 所 知道 的 成 熟 方 案 ， 如 图 13-1 所 示 。 






Home Examples Documentation Language Forum Download License v 





<a id="uploadfiles” href="javascript:; 


2 <div id="container"> 
LUPLOAD 28 <a id="pickfiles” href="javascript:;">[Selece #ileclesay 


) </div> Custom exam 
; 2 rr/ Shows you how to use the co 
At its core Plupload is visually flat and you can 33 <pre id="console"></pre> 


4 IMG_7170.)PG (2 mb) 100% 
customize it however you like. IMG_7171.JPG (2 mb) 100% 
36 <script type="text/javascript"> IMG_7172.)PG (2 mb) 100% 

x IMG_7173.)PG (2 mb) 100% 
IMG_7175.3PG (2 mb) 100% 


var uploader = new plupload.Uploader({ rs Sa 5 sir eer 


t : ‘html5, fi Light, ht 
Ne mye Diver: + tt ight, PEs IMG_7181.JPG (1 mb) 59% 
rowse Dutton : ‘pickfiles’, IMG_7182.)PG (2 mb) 


container: document.getE lementById( ‘con IMG_7184.3°G (1 mb) 

url : ‘upload.php’, IMG_7185.)PG (1 mb) 
flash_swf_url : -/js/Moxie.swf', 

silverlight_xap_urt : °../js/Moxie.xap’ [Select files) [Upload files} 


图 13-1 


13.7 jQuery.ajax 


Ajax EWA eb bias ere, Hr MEM 
基于 API 上 面 的 框 染 或 者 库 ， 虱 只 是 说 对 于 功能 的 
灵活 与 兼容 维护 性 做 出 最 优 的 扩展 。 





ajax 请 求 的 流程 : 


(1) 通过 new XMLHttpRequest 或 其 他 的 形式 
《指正 ) 生成 Ajax 的 对 象 zhr。 


(2) 通过 xhr.open(type, url, async, username, 
password) 的 形式 建立 一 个 连接 。 


(3) 通过 setRequestHeader 设 定 xhr 的 请 求 头 部 


(request header) 。 
(4) ii'send(data) tak IRA 4a fin HY HE o 


(5) 执行 在 xhr 上 注册 的 onreadystatechange 回 





调处 理 返 回 数据 。 





这 几 步 之 中 ， 我 们 开 及 者 可 能 会 遇 到 如 下 的 问 


C1) BRAH, 

(2) 将 返回 的 原始 数据 转换 为 想 要 的 格式 。 
(3) Ajax 乱码 问题 。 

(4) 页 面 缓存 。 

(5) HTTP 状 态 的 纠正 与 维护 。 

(6) 不 同 平台 羔 容 。 


jQuery 主要 就 是 解决 上 面 这 问题 ， 之 后 就 在 这 
个 基础 之 上 进行 扩展 jQuery 2.0.3 版 的 Ajax 部 分 ， 源 
码 大 概 有 1200 多 行 ， 主 要 针对 Ajax 的 操作 进行 了 一 
些 扩展 ， 使 之 更 加 灵活。 








jQuery 在 1.5 中 对 Ajax 模 块 的 重 写 ， 增 加 了 几 个 
新 的 概念 


Ajax 模 块 所 供 了 3 个 新 的 方法 用 于 管理 、 扩 展 


Ajax 请 求 ， 分 别 是 。 





(1) A iw ye asjQuery. ajaxPrefilter。 
(2) tak) 2 4sjQuery. ajaxTransport. 


(3) 类 型 转换 器 ajaxConvert。 





除 此 之 后 还 重 写 了 整个 异步 队列 处 理 ， 加 入 了 
deferred， 可 以 将 任务 完成 的 处 理 方 式 与 任务 本 号 
解 粳 合 。 使 用 deferreds 对 象 ， 多 个 回调 函数 可 以 被 
绑 定 在 任务 完成 时 执行 ， 甚 至 可 以 在 任务 完成 后 绑 
定 这 些 回调 函数 。 这 些 任务 可 以 是 异步 的 ， 也 可 以 


是 同步 的 。 


1. 链 式 反馈 done 5fail 





$.ajax({ 
url: "script.php", 
type: "POST", 
data: { 
id: menuId 


tr 
dataType: "html" 


}).done(function(msg) { 
$("#log").html(msg); 
}).fail(function(jqxXHR, textStatus) { 
alert("Request failed: " + textStatus); 
}); 





2. 分 离异 步 与 同步 处 理 


var ajax = $.ajax({ 

url: "script.php", 

type: "POST", 

data: { 

id: menuId 

}, 

dataType: "html" 
}).fail(function(jqXHR, textStatus) { 

alert("Request failed: " + textStatus); 
J); 


// 同 步 还 在 执行 代码 ， 这 个 函数 有 可 能 在 Ajax 结束 前 调用 
dosomething() 
// 同 步 还 在 执行 代码 ， 这 个 函数 有 可 能 在 Ajax 结束 前 调用 
dosomething() 














/ 1 FRAO LESS LE TAM DZ 
ajax.done(function(msg) { 

$("#1log").html(msg); 
t) 


不 再 被 限制 到 只 有 一 个 成 功 ， 失 败 或 者 完成 的 
回调 函数 了 。 相 反 这 些 随 时 被 添加 的 回调 函数 被 放 
置 在 一 个 先进 移出 的 队列 中 。 





3. 同时 执行 多 个 Ajax 请 求 


function ajax1() { 
return $.get('1.htm'); 
} 


function ajax2() 
return $.get('2.htm'); 
} 


$.when(ajax1(), ajax2()) 
.then(function() { 
/成 功 


) 
.fail(function() { 
// 失 败 
H); 








T HL, deferredXt 4 iè ej Query HY [Al Vi ek žr 
解决 方案 ， 它 解决 了 如 何 处 理 耗 时 操作 的 问题 ， 对 
那些 操作 提供 了 更 好 的 控制 ， 以 及 统一 的 编程 接 
LH. 


jqXHR 对 象 


从 jQuery 1.57748, $.ajax()i& Fl 
XMLHttpRequest (jqXHR) 对 象 ， 该 对 象 是 浏览 器 
的 原生 的 XMLHttpRequest 对 象 的 一 个 超 集 。 用 于 屏 
澈 各 种 不 同 传 输 对 象 的 差异 ， 比 如 说 ， 旧 式 IE 古 使 
Fa ActiveXObject, WRZ RA jQuery Fe Ë 
H XDomainRequest, PRENI w ar H 
XMLHttpRequest， 但 XMLHttpRequest 分 为 第 一 代 
与 第 二 代 ， 当 你 要 JSONP 时 ，jQuery 会 使 用 script 标 
签 来 发 送 请 求 ， 但 你 要 上 传 时 ，jQuery.form 会 用 
iframe。 因 此 必须 包 一 层 ， 无 法 最 终 用 什么 东西 及 
送 请 求 ， 在 回调 里 面 的 this 总 是 为 一 个 类 似 
XMLHttpRequest 的 对 象 〈jqXHR 对 象 ) 。 




















一 个 jqXHR 对 象 拥有 以 下 属性 与 方法 ， 如 图 13- 
2 所 示 。 


e readyState. 


e status. 


e statusText. 

e responseXML/responseText. 

e setRequestHeader(name, value). 
e getAllResponseHeaders(). 

e getResponseHeader(). 

e abort(). 


jQuery.Deferred 出 来 后 ， 通 过 Deferred 的 
promise 方 法 ， 再 为 它 添加 更 多 添加 链 式 回调 的 方 
法 ， 如 图 13-3 所 示 。 
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Object 


> abort: function (statusText) { 

> getAllResponseHeaders: function () { 

> cetResponseHeader: function (key) { 

> overrideMimeType: function (type) { 
readyState: 8 

> setRequestHeader: function (name, value.. 

> statusCode: function (map) { 

> _proto__: Object 





图 13-2 


nn 
v jqXHR: Obj ect 
> abort: function (statusText) { 
> always: function () { 
complete: function (ODT 





> done: function () { 
> error: function () { 
> fail: function () { 


> getAllResponseHeaders: function () { 
> cetResponseHeader: function (key) { 
> overrideMimeType: function (type) { 
> pipe: function ( /+ fnDone, fnFail, fnProgress .. 
> progress: function () { 
> promise: function (obj) { 
readyState: @ 


> setRequestHeader: function (name, value) { 

> state: function () { 

> statusCode: function (map) { 

> success: function () { 

> then: function ( /* fnDone, fnFail, fnProgress .. 
四 : Object 


图 13-3 


deferred = jQuery.Deferred(), 
deferred.promise( jqXHR ); 








此 外 ，jQuery 在 jQXHR 短 暂 的 生命 周期 中 也 能 
触发 各 种 事件 ， 我 们 可 以 订阅 这 些 事件 并 在 其 中 处 
理 我 们 的 逻辑 。 在 jQuery 中 有 两 种 Ajax 事件 : 局 部 
事件 和 全 局 事件 。 





局 部 事件 《回调 函数 ) ， 在 $.ajax(0) 方 法 的 
options 参 数 中 声明 ， 可 以 用 来 设置 请 求 数据 和 获 
取 、 处 理 啊 应 数据 。 


(1) beforeSend 访 函数 可 在 发 送 请 求 前 修改 
XMLHttpRequest &, WINI A E MHTTPL. 





(2) dataFilter 在 请 求 成 功 之 后 调用 。 耕 状态 
码 为 304( 未 修改 ) 则 不 触发 此 回调 。 





(3) success 请 求 成 功 时 触发 。 
(4) error 请 求 失败 时 调用 此 函数 。 


(5) complete 请 求 完 成 后 回调 图 数 〈 请 求 成 功 
或 失败 之 后 均 调 用 ) 。 


全 局 事件 ， 每 次 Ajax 请 求 都 会 触发 ， 它 会 向 
DOM 中 的 所 有 元 系 广 播 ， 你 只 需 为 DOM 中 任意 元 
素 bind 好 全 局 事件 即 会 触发 〈 知 绑 定 多 次 ， 则 会 依 
次 触发 为 事件 注册 的 回调 函数 ) 。 





(1) ajaxStart 开 始 新 的 Ajax 请 求 ， 并 且 此 时 
jQuery 对 象 上 没有 其 他 Ajax 请 求 正 在 进行 。 


(2) ajaxSend 当 一 个 Ajax 请 求 开 始 时 触发 。 





(3) ajaxSuccess 全 局 的 请 求 成 功 。 


(4) ajaxError 全 局 的 发 生 错 误 时 触发 。 





(5) ajaxComplete 全 局 的 请 求 完 成 时 触发 。 


(6) ajaxStop 当 jQuery 对 象 上 正在 进行 Ajax 请 
求 都 结束 时 触发 。 


此 外 ，jQuery 还 提供 了 几 个 提交 数据 时 经 常用 
的 数据 序列 化 函数 。 





serialize 用 于 序列 化 一 组 表单 元 素 ， 将 表单 
内 容 编码 为 用 于 提交 的 字符 串 。 











serializeArray 用 于 序列 化 一 组 表单 元 素 ， 将 
表单 内 容 编码 为 一 个 JavaScript 数 组 。 





param 将 一 个 JS 数组 或 对 象 序列 化 为 字符 串 





值 ， 以 便 用 于 URL 查 询 字符 串 或 Ajax 请 求 。 


总 结 ，jQuery.ajax 古 目前 世界 上 最 好 的 Ajax 程 
序 了 ， 文 持 Promise， 功 能 齐全 ， 扩 展 性 强 。 当 然 它 
也 有 一 个 缺点 ， 就 是 与 jQuery 绑 在 一 起 ， 有 时 为 了 
简化 Ajax 编 码 束 引入 整个 jQuery 未 人 免 有 些 浪费 ， 则 
可 以 试 试 这 些 专业 库 : 











1. 成 功 的 Ajax 请 求 的 事件 流 〈 见 图 13-4) 


AjaxStart (全 局 ) beforeSend AjaxSend (全 局 ) 


AjaxComplete (全 局 ) AjaxStop (全 局 ) 


图 13-4 























2. 失败 的 Ajax 请 求 的 事件 流 〈 见 图 13-5) 


beforeSend AjaxSend〈 全 局 ) 


AjaxStop〈 全 局 ) 


图 13-5 


AjaxStart (4: Ja) 


AjaxComplete ( 42 fay) 



















https://github.com/ForbesLindesay/ajax 基 于 早期 
的 jQuery.ajax 设 计 出 来 ， 用 法 与 jQuery 一 致 ， 可 异 
不 文 持 Promise。PC 上 要 单独 使 用 Ajax 时 可 以 使 用 
此 库 。 


https://github.com/visionmedia/superagent HH A 4F 
杀 目 打造 ，browsernodejs 通 用 ， 插 件 丰 富 ， 可 惜 不 
XLFFPromise K HATZ 〈IE0 十 ) 。 





https://github.com/mzabriskie/axios—“ pak% Œ 
早 的 Ajax 库 ， 支 持 Promise， 架 构 优 美 ， 兼 容 性 好 





(IE8 十 )。 在 业务 线 使 用 时 ， 这 个 库 也 是 推荐 使 
用 。 


https://github.com/ded/reqwest 与 jQuery.ajax 基 本 
IER, SCHFPromise, HAERE CE6+) ， 设 计 
精巧 ， 代 码 量 少 〈 依 赖 于 xhr2 库 ) 。 





https://github.com/pyrsmk/qwest 从 名 字 可 以 看 
出 ， 它 是 reqwest 的 模仿 者 ， 优 点 应 该 与 它 与 一 致 ， 
但 不 能 运行 于 Node.js。 它 行 数 基 于 更 少 。 它 需要 依 
赖 一 个 不 怎么 标准 的 Promise。 








13.8 fetch， 下 一 代 Ajax 


Ajax 目 2005 年 出 现在 公众 面前 ， 己 经 有 十 多 
年 ， 算 是 一 个 很 长 寿 的 技术 方案 了 了。 而 它 的 取 蔡 
点 ， 则 安 照 W3C 一 惯 的 手段 ， 从 社区 成 玖 的 方案 标 
准 化 。fetch， 大 抵 可 以 认为 是 jQuery.ajax 的 官方 
版 。 





脱胎 于 微软 私有 的 异步 请 求 方案 
XMLHttpRequest， 其 运作 方式 于 现在 的 眼光 来 看 ， 
CAA MJ. Exe Aonxxx RYO ya, Fe 
SLAY FSS EP RS. MP SPL Tl IP SE S 
况 ， 它 很 难处 理 ， 一 不 心 小 就 出 回调 地 狱 ,， 于 是 有 
了 jQuery 的 Deferred 及 后 来 的 Promise。 





我 们 比较 一 下 这 两 者 的 写法 吧 。 





//ajax 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', url); 
xhr.responseType = 'json'; 


xhr.onload = function() { 
console. log(xhr.response); 

J}; 

xhr.onerror = function() { 
console.log("Oops, error"); 

}; 

xhr.send(); 

//fetch 

fetch(url).then(function(response) { 
return response.json(); 

}).then(function(data) { 
console.log(data); 

}).catch(function(e) { 
console.log("Oops, error"); 


t); 





从 形式 上 看 ，fetch 是 比 Ajax 人 简单 些 ， 但 实际 不 





然 。fetch 需 要 4 个 东西 配合 一 起 使 用 。 我 们 看 一 下 
API. 


BCS] A fetch, 1X AR Pa AY HEA PER 4 SE BY 
如 图 13-6 所 示 。 


©@coO@ 


Latest V LatestV 10+V LatestV 614+V 


图 13-6 


它 总 共有 4 个 对 象 ，fetch . Request, Headers 


~ Response. 


fetch 是 入 口 函 数 ， 它 要 求 传 入 一 个 url 或 一 
‘Request 实例 ， 后 面 再 跟 一 个 可 选 的 配置 对 象 。 
配置 对 象 与 Request 对 象 可 以 指定 一 个 headers 属 
性 ， 这 个 对 象 是 一 个 对 象 ， 可 以 是 普通 JavaScript 对 
BR, TTD —Nieadeskol, MES 在 第 一 个 
then 方 法 中 返回 Responses 实例 。 这 样 ，4 个 东西 吏 
PEX J o 





下 面 是 官方 的 几 个 简单 例子 。 
返回 文本 


fetch('/users.json').then(function(response) { 
console. log(response.headers.get('Content-Type' ) ) 
console.log(response.headers.get('Date')) 
console.log(response.status) 


console. log(response.statusText ) 


t) 





返回 JSON 


这 个 见 上 面 的 例子 。 
3. 抽取 状态 码 等 元 信息 


fetch('/users.html') 
. then(function(response ) { 
// 无 论 后 端 返回 什么 ，response 的 text 方 法 会 将 它 转换 为 文本 
return response.text() 
}).then(function(body) { 





document.body.innerHTML = body 
}) 
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4. 发送 POST 请 求 
var form = document.querySelector('form' ) 


fetch('/users', { 
method: 'POST', 
body: new FormData(form) 


}) 





5. 上 传 文件 





var input = document.querySelector('input[type="file"]' ) 


var data = new FormData() 
data.append('file', input.files[0]) 
data.append('user', 'hubot') 


fetch('/avatars', { 
method: 'POST', 
body: data 
}).then(function( ){/***/}) 


e 
或 者 使 用 Request 实 例 上 传 文件 。 


var myImage = document.querySelector('img'); 
var myRequest = new Request('flowers.jpg'); 
fetch(myRequest).then(function(response) { 
return response.blob(); 
}).then(function(response) {// 图 片 预览 





var objectURL = URL.createObjectURL(response); 
myImage.src = objectURL; 


}); 





使 用 header 实 例 设 置 请 求 头 。 


var myImage = document.querySelector('img'); 
var myHeaders = new Headers(); 
myHeaders.append('Content-Type', ‘image/jpeg'); 


var myInit = { method: 'GET', 
headers: myHeaders, 
mode: '‘'cors', 
cache: 'default' }; 
var myRequest = new Request('flowers.jpg'); 


fetch(myRequest,myInit).then(function(response) { 


}); 





Reduest 对 象 拥有 如 下 配置 项 。 


method: 请 求 类 型 ，GET, POST, PUT, DELETE, 
HEAD. 

url: 请 求 地 址 ，URL of the request. 

headers: 关联 的 Header 对 象 。 

referrer: referrer。 

mode: 请 求 的 模式 ， 主 要 用 于 跨 域 设置 ，cors,， 


no-cors, same-origin。 


credentials: 7? Ki&Cookie omit, same-origin。 
redirect: 收 到 重 定 问 请 求 之 后 的 操作 ，follow， 


error, manual。 





integrity: 完整 性 校 验 。 
cache: 缓存 模式 (default, reload, no-cache) 。 


Response 对 象 拥有 如 下 方法 (我 们 不 用 关心 它 
是 如 何 构 建 的 ) 


The Response also provides the following 


methods. 


clone): 复制 自身 。 

error(): 获取 错误 详情 的 Promise。 
redirect(): HEFE. 

arrayBuffer(): 返回 一 个 Arraybuffer 数 据 的 
Promise. 

blob(): 返回 一 个 Blob 数 据 的 Promise。 
formData0: 返回 一 个 FormData 数 据 的 Promise。 
json0: 返回 一 个 JSON 数 据 的 Promise。 
text(): 返回 一 个 字符 串 数据 的 Promise。 
status: 状态 码 Cex: 200, 404, etc. ) 。 

ok: 古 仍 成 功 啊 应 〈status in the range 200- 
299) 。 








statusText: status code (ex: OK) 。 


headers: 啊 应 头 。 











用 法 是 简单 的 ， 但 是 如 果 想 在 低 版 本 浏览 器 下 
使 用 〈 主 要 是 IE6~IE8) ， 还 是 很 艰难 。 总 不 能 
一 项 新 技术 ， 就 不 管 上 日 客户 呆 ， 因 此 我 们 像 登 积木 








一 样 堆砌 polyfil， 基 本 可 以 支持 IE8 十 。 


引入 ES5 的 polyfill: es5-shim, es5-sham. 


e 引入 Promise 的 polyfill: es6-promise。 

。 引入 fetch 探 测 库 : fetch-detector。 

。 引 入 fetch 的 polyfill: fetch-ie8。 

。 可 选 : 如 果 你 还 使 用 了 jsonp， 引 入 fetch-jsonp。 


6. fetch 见 “ 坑 ?” 


fetch 请 求 默认 是 不 带 cookie 的 ， 需 要 设置 
fetch(url, {credentials: 'include'})。 服 务 器 返回 400， 
500 错 误 码 时 并 不 会 reject， 只 有 网 络 错误 导致 请 求 
不 能 完成 时 ，fetch 才 会 被 reject。 


7. IE 使 用 策略 


IE8、IE9 的 XHR 不 支持 CORS 跨 域 ， 虽 然 提供 
XDomainRequest， 但 这 个 东西 下 是 玩具 ， 不 文 持 传 
Cookie! 如 果 接 口 需 要 权限 验证 ， 还 是 秒 秒 地 使 用 








jsonp 吧 ， 推 荐 使 用 fetch-jsonp。 








在 本 书 成 书 时 ，github 上 有 关 fetch 的 polyfill 还 
是 很 少 ， 但 当 作为 一 个 潮流 ，fetch 取 蔡 Ajax 只 是 时 
间 的 问题 。 如 果 大 家 还 坚持 自己 写 Ajax 库 ， 建 议 参 
考 fetch 的 API 来 构建 。 


第 14 章 ” 动 男 引擎 





浏览 网 页 时 ， 我 们 经 各 被 一 些 创 意 所 感动 。 无 





论 是 极 具 视觉 冲击 的 动画 ， 还 是 很 平缓 但 舒适 的 细 
微 变 动 ， 都 是 这 东西 所 创造 的 。 动 画 引 擎 听 起 来 是 
很 局 级 的 东西 ， 但 原理 却 很 简单 。 


以 前 听 说 日 本 的 动画 是 这 样 做 出 来 : 一 个 人 在 
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skal AAW zoe, FAS RRA, EO 
像 动 一 样 。 动 画 只 不 过 是 我 们 眼睛 的 残 影 ， 叫 做 视 
i A PAA. BR ANRETT: BRS. Œ 
网 页 中 ， 控 制 样 式 的 任务 已 经 区 由 CSS 和 掌控 ， 让 
JavaScript 第 一 次 拥有 时 间 处 理 的 API，setTimeonut 与 
setInterval 早 在 CSS 诞 生前 已 出 现 。CSS 可 划分 两 
种 ， 一 种 的 值 近似 一 个 无 限 集合 ， 一 种 只 有 容 克 几 
个 值 。 能 够 度量 与 变化 的 也 是 那个 无 限 集 ， 吏 是 像 
PEE, red. yellow. black, FHA Dee HRA 
RGB (TIPS. SNA WEEN as ET, Eh 20ms 
~BOms CARE SVE, TERA 3m. MA TE 
ray, LAU ARI; MÆR, BLAU Ae; 改变 坐标 
Fl, AULA Fe; 改变 透明 度 ， 残 叫 淡 入 淡出 .…… 





























14.1 动画 的 原理 


在 标准 浏览 器 中 ， 可 计算 的 样式 值 基 本 上 它 已 
经 为 你 转换 好 ， 如 width、height、margin-x、 
border-x-width、padding-x， 这 些 样式 的 单位 为 px。 
color、background-color 则 被 分 解 为 RGB， 这 个 很 容 
易 束 格式 化 为 一 个 数组 ， 透 明度 就 目 不 用 说 。 不 
过 ， 最 恶心 的 是 新 引进 的 变形 样式 transfrom， 它 有 
两 类 传 值 方式 ， 一 种 面 同 人 类 ， 古 rotate()、 
skew()、scale()、translate()， 分 别 还 有 x、y 之 分 ， 
比如 rotateX() 和 rotateY()， 以 此 类 推 ， 一 类 面 同 计 
算 机 ， 传 入 窍 阵 进去 ，matrixz0， 无 论 是 传 什 么 ， 它 
最 后 都 转 成 矩阵 。 





如 果 换 是 旧版 本 IE， 那 么 就 得 目 己 转 了 ， 比 如 
你 原来 的 单位 是 em, currentStyle 会 返回 em， 原来 填 
的 闫 色 是 red， 它 不 会 返回 rgb(255,0,0) 给 你 。 
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确 样式 值 ， 这 个 笔者 在 样式 模块 这 一 曹 有 介绍 ， 那 
里 给 出 的 $.css 方 法 基本 上 除 闫 色 值 都 是 已 转换 好 
的 。 





现在 我 们 尝试 让 一 个 方块 动 起 来 吧 。 动 起 来 ， 
换言之 束 古 改变 位 置 ， 在 CSS 就 是 对 应 top 与 left， 
当然 你 还 可 以 用 margin-left， 现 在 我 们 只 讲 最 通用 
的 方式 。 要 想 用 top 与 left 还 需要 让 它 相 对 定位 或 绝 
对 定位 。 通 第 的 做 法 是 父 元 素 相 对 定位 ， 成 为 包含 
块 ， 子 元 系 绝 对 定位 。 只 有 定位 了 ，top 与 left 才 不 
会 返回 auto， 而 是 返回 可 计算 的 像素 值 。 首 先 要 得 
到 它 原来 的 位 置 。 简 单 起 见 ， 先 实现 平移 ， 那 么 只 
需要 取 left， 读 者 可 以 在 Firefox 下 做 实现 ， 直 接 使 用 
getComputedStyle， 然 后 让 用 户 传 结束 位 置 ， 起 始 
位 置 与 结束 位 置 之 间 的 距离 ， 就 古 要 一 点 点 操作 的 
变量 。 动 夯 还 涉及 时 间 ， 一 个 时 长 ， 也 就 是 动画 执 
行 的 总 时 间 ， 男 一 个 是 每 次 变动 的 相隔 时 则 ， 这 个 
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名 叫做 fps。 


fps 通 俗 地 说 ， 叫 刷新 率 ， 在 1 秒 内 更 新 多 少 次 
画面 。 根 据 人 眼睛 的 视觉 停留 效应 ， 知 前 一 幅 画 像 
留 在 大 脑 中 的 印象 还 没 消失 ， 后 一 幅 画 像 就 接 旺 而 
至 ， 而 且 两 幅 画面 间 的 差别 很 小 ， 就 会 有 “ 动 ” 的 感 
觉 。 那 么 停留 多 少 室 秒 最 合适 呢 ? 我们 不 但 要 照顾 
人 的 眼睛 ， 还 要 顾及 一 下 显示 器 的 显示 速度 与 浏览 
占 的 演 染 速度 。 根 据 外 国 的 统计 ，25 写 秒 为 最 佳 数 
值 。 其 实 ， 这 个 数值 我 们 应 该 当 作 常 识 来 记 住 。 联 
想 一 下 ， 日 本 动画 好 像 有 个 规定 是 1 秒 30 张 画 ， 中 
国 的 是 1 秒 24 张 。 用 1 秒 去 除 以 张 数 ， 就 得 到 每 幅 男 
面 停留 的 时 间 。 日 本 的 那个 27.77 室 秒 已 经 很 接近 我 
们 的 25 毫 秒 了 ， 因 为 浏览 器 的 泻 染 速度 明显 不 如 电 
视 机 的 演 染 速度 ， 尤 其 IE6 这 个 拉 后 腿 的 。 距 离 与 
时 间 出 来 了 ， 那 么 我 们 再 求 一 下 速度 就 行 了 。 




















为 此 我 们 建 一 个 新 页 面 ， 里 面 有 一 个 方块 ， 它 
位 于 包含 块 这 个 轨道 上 。 它 要 从 这 一 端 跑 到 另 一 个 
端 。 动 画 时 间 为 2 秒 ，fps 为 30 帧 。 





<style type="text/css"> 
#taxiway{ 
width: 800px; 
height :100px; 
background: #E8E8FF; 
position: relative; 


} 

#move{ 
position: absolute; 
left:0px; 
width:100px; 
height :100px; 
background: #a9ea00; 

} 

</style> 


<div id="taxiway"> 
<div id="move" ></div> 
</div> 
<script> 
window.onload = function() { 
var el = document.getElementById("move"); 
var parent = document.getElementById("taxiway" ) 
var distance = parent.offsetwidth - el.offsetWidth; 
// 总 移动 距离 
var begin = parseFloat(window.getComputedStyle(el, null 
). left); // 开 始 位 置 





var end = begin + distance; // 结 束 位 置 
var fps = 30; // Kill 
var interval = 1000 / fps; // 每 相隔 多 


少 ms 刷 新 一 次 
var duration = 2000;// 时 长 
var times = duration / 1000 * fps; //— FEMI BT 
这 么 多 次 
var step = distance / times;// 每 次 移动 多 少 距离 
el.onclick = function() { 
var now = new Date 





var id = setInterval(function() { 

if (begin >= end) { 
el.style.left = end + "px"; 
clearInterval(id); 
alert(new Date - now) 

} else { 
begin += step; 
el.style.left = begin + "px" 


}, interval) 
} 
} 


</script> 








上 例 中 ， 我 们 使 用 了 最 简单 的 累加 来 实现 。 现 
在 我 们 改写 一 下 ， 加 入 进度 这 个 变量 ， 让 其 更 具 广 
TEs 


el.onclick = function() { 
var beginTime = new Date 
var id = setInterval(function() { 
var t = new Date - beginTime;// 当 时 已 用 掉 的 时 间 
if (t >= duration) { 
el.style.left = end + "px"; 
clearInterval(id); 
alert(t) 
} else { 
var per = t / duration;// 当 前 进度 
el.style.left = begin + per * distance + "px" 














}, interval) 





如 果 我 们 能 随意 控制 per 这 个 数值 ， 那 么 就 能 
轻易 实现 加 速 或 减速 。 于 是 乎 ， 人 们 友 明 了 组 动 公 
式 。 所 谓 绥 动 公式 其 实 来 目 数 学 上 的 三 角 函 数 、 二 
次 项 方程 式 、 高 阶 方程 式 ， 它 们 最 初 由 Flash 界 的 
Robert Penner WK. A TJAN, RIA E 
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摆 、 弹 营 、 来 回 弹 动 等 效果 。 

















14.2 e 


经 过 这 么 多 年 的 友 展 ， 绥 动 公 式 的 各 项 规范 都 
稳定 下 来 。 虽 然 现 在 还 有 人 源源 不 断 地 发 掘 出 新 
式 ， 但 一 般 业 务 中 ， 绝 对 多 数 人 都 是 用 默认 的 
easeIn 或 linear。 因 此 如 有 果 对 库 的 大 小 有 顾虑 ， 那 么 
就 将 它们 独立 成 一 个 模块 吧 。 


现在 所 有 组 动 公式 ， 基 本 上 除了 linear 外 〔〈 但 
它 也 常 被 称 为 easeNone) ， 它 们 都 以 ease 开 头 命 
名 。 





添加 3 种 后 级，In 表 示 加 速 ，Onut 表 示 减 速 ， 
InoOut 表 示 加 速 到 中 途 又 开始 减速 ， 于 是 承 有 
easeIn、easeOut、easeInOut 之 分 。 如 果 单 是 这 样 命 
名 ， 说 明 ， 写 们 没有 介入 高 阶 函 数 与 三 角 函 数 ， 像 
linear 束 是 匀速 








然后 再 以 实现 方式 与 指数 或 开 根 进行 区 分 。 
Sine 表 示 由 三 角 函 数 实 现 ，Quad 是 二 次 方 ，Cubic 
是 三 次 方 ，Quart 是 四 次 方 ，Quint 是 五 次 方 ，Circ 使 
用 开平 方 根 的 Math.sqit，Expo 使 用 开 立 方 根 的 
Math.pow, Elastic 则 是 结合 三 角 函 数 与 开 立 三 方 根 
的 初级 弹 苇 效果 ，Back 是 使 用 了 一 个 1.70158 钊 数 
来 计算 的 回 退 效果 ，Bounce 则 是 高 级 弹 得 效 果 ， 如 
图 14-1 所 示 。 














linear 


easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad 
easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart 
easeInQuint easeOutQuint —easeInOutQuint easeInExpo easeOutExpo easeInOutExpo 


easeInCirc 一 easeInOutCirc easeInElastic g eOutElastic 


E. a easeInOut easeInBoun' easeOutBounce easeInOutBounce 
va Z] 


图 14-1 





图 片 出 目 
http://hosted.zeh.com.br/tweener/docs/en- 


us/misc/transitions.html 


这 些 公式 我 们 可 以 在 AS 库 ， 或 


jquery.easing.js、mootools 库 里 面 找到 ， 基 本 上 大 同 
小 民 。 其 中 jquery.easing.js 最 规范 ，mootools 使 用 循 
环 生 成 方式 实现 ， 人 代码 最 简 。 读 者 想 实现 目 己 的 动 
国库 ， 可 以 参考 这 两 者 。 














jQuery 标准 库 里 面 只 有 两 条 : 


linear: function( p ) { 
return p; 


}, 


swing: function( p ) { 


return 0.5 - Math.cos( p*Math.PI ) / 2; 
} 





但 显然 与 其 他 绥 动 库 的 参数 形式 不 一 样 : 





var easing = { 
easeInQuad: function( t, b, c, d) { 
return c * (t Æ d) * t + b 


F 
easeOutQuad: function( t, b, c { 

return -c * (t /= d) * (t - 2) + b; 
}, 
easeInOutQuad: function( t, b, c, d) { 

if ((t /=d / 2) < 1) 

returnc / 2 * t * t +b; 
return -c / 2 * ((--t) * (t - 2) - 1) +b; 


[L 


这 是 因为 jQuery 在 上 面 的 计算 过 程 已 经 做 了 这 
一 步 。 我 们 看 这 4 个 参数 分 别 代表 什么 。 


T: timestamp， 指 绥 动 效果 开始 执行 到 当前 帆 所 
经 过 的 时 间 段 ， 单 位 ms。 

B: beginning val， 起 始 值 。 

C: change， 要 变化 的 总 量 。 

D: duration， 动 画 持 续 的 时 间 。 


返回 的 是 直接 可 用 的 数值 ， 或 许 我 们 只 要 加 个 
单位 进行 赋值 束 行 了 。 











而 jQuery 那 一 个 参数 的 风格 ， 其 实 是 当前 时 间 
减 去 动画 开始 时 间 除 以 总 时 间 的 比值 ， 一 个 0 到 1 的 
小 数 ， 它 用 于 乘 以 总 变化 量 ， 然 后 加 上 起 始 值 ， 就 
是 现在 此 样式 的 情况 。 下 面 是 绥 动 的 应 用 ， 还 是 使 
用 上 例 。 


window.onload = function() { 


var el = document.getElementById("move"); 
var parent = document.getElementById("taxiway" ) 
var change = parent.offsetWidth - el.offsetWidth; //M (tie 


var begin = parseFloat(window.getComputedStyle(el, null).le 








ft ) ;// 起 始 值 
var end = begin + change; // 结 束 值 
var fps = 30; // 刷 新 率 
var interval = 1000 / fps; // 每 相隔 多 
少 ms 刷 新 一 次 
var duration = 2000; // 时 长 
var bounce = function(per) { // 缓 动 公式 
» BE 





if (per < (1 / 2.75)) { 
return (7.5625 * per * per); 
} else if (per < (2 / 2.75)) { 
return (7.5625 * (per -= (1.5 / 2.75)) * per + .75) 


} else if (per < (2.5 / 2.75)) { 
return (7.5625 * (per -= (2.25 / 2.75)) * per + .93 
75); 
} else { 
return (7.5625 * (per -= (2.625 / 2.75)) * per + .9 
84375); 


el.onclick = function() { 
var beginTime = new Date 
var id = setInterval(function() { 
var per = (new Date - beginTime) / duration;// 进 度 
if (per >= 1) { 
el.style.left = end + "px"; 
clearInterval(id); 
} else { 
el.style.left = begin + bounce(per) * change + 


}, interval) 





反击 它 就 肥 现 方块 到 终点 后 还 弹 回 来 ， 再 过 


去 M BRK T A...... 


14.3 jQuery.animate 


PLE BRANT a YS SH | EH Pe PE a 
行 ， 注 定 这 个 API 到 用 户 这 里 也 是 集 化 操作 ， 一 下 
子 处 理 N 个 元 素 。 但 这 也 无 所 谓 ， 关 键 是 函数 名 与 
如 何 传 参 。 


jQuery 的 API 吻 用 性 很 好 ， 我 们 看 一 下 它 的 
animate， 有 2 种 用 法 。 


.animate( properties [, duration ] [, easing ] [, complete ] ) 
.animate( properties, options ) 





第 一 个 参数 恒 为 要 进行 动画 的 属性 的 映射 ， 在 
第 一 种 情况 下 ， 其 他 参数 都 是 可 选 的 ， 因 为 
duration 除 了 slow、fast、default 这 3 个 字符 串 就 是 数 
字 ，easing 为 特殊 的 组 动 公 式 的 名 字 ，complete 是 函 
数 ，options 是 对 象 。 不 过 尽管 说 得 轻松 ，jQuery 在 
这 里 也 花 了 几 十 行进 行 转换 。 最 后 转换 两 个 对 象 的 














形式 其 实 与 后 来 出 现 的 CSS3 keyframe animation?) 
定义 非常 吻合 。 


我 们 还 是 利用 上 例 的 方块 ， 加 个 类 名 animate， 
就 能 看 到 效果 了 。 


.animate { 
animation-duration: 3s; 
animation-name: slidein; 
animation-timing-function:ease-in-out; 
animation-fill-mode: forwards 


} 


keyframes slidein { 
from { 
left: 0%; 
background: white; 


to { 
left: 700px; 
background: red; 








这 个 动画 分 为 两 部 分 : 第 一 个 部 分 是 普通 的 样 
式 规 则 ， 用 于 描述 动画 所 需 时 长 ， 绥 动 公式 ， 结 
后 你 留 状态 ， 重 复 多 少 次 ， 及 关键 帧 动画 的 引用 名 
F (slidein) ; 第 二 个 部 分 是 关键 帧 规划。 这 里 只 








插入 两 个 关键 帧 ， 实 际 上 可 以 插入 更 多 ， 最 开始 与 
最 尾 的 可 以 用 from、to 命 名 。 其 实 当 你 用 JavaScript 
去 取 时 ， 它 们 部 会 转换 为 百分比 ，0% 或 100%。 其 
中 以 最 尾 的 最 重要 ， 没 有 浏览 器 会 名 上 ， 它 就 古 对 
应 jQuery.animate 方 法 的 第 一 个 参数 。 人 至 于 初始 值 ， 
浏 贤 占 会 目 动 计算 ， 如 果 我 们 是 使 用 纯 JavaScript 实 
现 方式 ， 它 们 殴 要 我 们 来 计算 了 。 动 画 引 擎 的 强大 
与 否 ， 这 时 束 取 决 于 CSS 模 块 是 否 强 大 Jo animate 
方法 的 第 二 个 参数 等 对 应 animation-duration、 
animation-timing-function、animation-fill-mode 等 设 


Ho 




















除 此 之 外 ，jQuery 还 提供 了 一 个 queue 参 数 ， 目 
的 让 作用 于 同一 个 元 系 的 动画 进行 排队 ， 先 处 理 完 
XP AAR SEAS, [AJIT PM as PY 
定时 器 就 太 多 了 。 加 之 集 化 操作 ， 会 把 它 放大 化 ， 
队列 的 重要 性 束 更 突出 。 为 此 jQuery 把 这 个 参数 默 
认为 true。 








从 实现 上 看 ，jQuery 的 队列 是 放 在 元 又 对 应 的 
绥 存 体 上 ， 里 面 是 一 个 Promise 对 象 ，complete 之 
后 ， 会 自动 弹出 下 一 个 动画 对 象 。 所 有 动画 对 象 都 
有 自己 的 setInterval 驱 动 。 在 YUI、kissy、mass 
Framework 则 有 一 个 中 央 队 列 ， 所 有 不 排队 的 动画 
全 部 放 在 这 数组 中 ， 然 后 有 一 个 setInterval 来 驱动 它 
们 ， 排 队 的 动画 作为 它 的 兄 第 的 属性 而 存在 〈 有 的 
中 央 队 列 可 能 是 一 条 二 维 数组 ) ， 当 前 面 的 动画 执 
行 完 ， 排 队 的 动画 就 会 翻身 。 





14.4 mass Framework 基 于 JavaScript 的 
动画 引擎 


现在 我 们 看 一 下 ， 动 画 引 苟 是 如 何 做 的 。 首 
先 ， 我 们 搞 一 个 中 央 队 列 《 也 叫 时 间 轴 ， 我 们 在 里 
面 插入 关键 帧 ， 两 个 关键 颜 之 间 残 是 我 们 的 补 间 动 
m) ， 其 实 就 是 一 个 数组 。 只 要 它 里 面 有 一 个 元 
系 ， 它 吏 驱 动 setInterval 执 行动 画 。 如 果 动 画 执 行 完 

它 束 会 删 挥 其 node 属 性 ， 并 且 从 数组 中 删除 此 
元 系 。 检 测 一 下 数组 还 有 没有 元 系 ， 没 有 就 
clearInterval, 7} WAKE. 








https://github.com/RubyLouvre/mass -Framework/blob/master/fx.js 





























var timeline = $.timeline = []; // 时 间 轴 
function insertFrame(frame) { // 插 入 包含 关键 帧 原始 信 
FMEA LT BR 

if (frame.queue) { // 如 果 指 定 要 排队 





var gotoQueue = 1; 
for (var i = timeline.length, el; el = timeline[--1i];) 


{ 
if (el.node === frame.node) { // 第 一 步 
el.positive.push(frame); // 子 队列 
gotoQueue = 0; 
break; 
} 


} 
if (gotoQueue) { // 


timeline.unshift(frame) ; 





} 
} else { 
timeline.push(frame) ; 
} 
if (insertFrame.id === null) {// 只 要 数组 中 有 一 个 元 素 就 开始 运行 


insertFrame.id = setInterval(deleteFrame, 1000 / $.fps) 


} 


insertFrame.id = null; 





具体 如 图 14-2 所 示 。 


HHA = 


图 14-2 





主队 列 的 动画 是 立即 执行 的 ， 一 个 元 素 可 以 对 
应 多 个 动画 ， 比 如 它 的 宽 与 高 与 背景 色 都 要 同时 改 
变 。 在 上 图 中 ， 狗 元 素 就 有 两 个 同时 进行 的 动画 。 
但 在 东 些 场合 ， 我 们 要 求 一 个 方块 像 星星 一 样 一 内 
一 内 地 有 上 眼睛， 就 需要 子 队 列 了 。 子 队列 是 放置 等 
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ett]. fECSS3'F, Aanimation-fill-mode, f 


松 实现 倒 市 的 效果 。 


<div id="test" class="animate" ></div> 
<style type="text/css"> 
#test{ 
width:100px; 
height :100px; 
background:blue; 





} 
/* 此 动画 先 放 大 再 缩 回 原状 */ 

.animate{ 
animation-duration:3s; 
animation-name: cycle; 
animation-iteration-count:2; 
animation-direction:alternate; 

} 

@keyframes cycle{ 
tof 
width: 200px; 
height :200px; 

} 


} 
</style> 








才 执 行 


E 够 轻 


用 JavaScript 实 现 承 是 ， 把 第 一 帧 与 最 后 一 帧 调 
换 。 我 们 把 这 些 动画 放 到 negative 子 队列 中 。 如 果 


不 是 倒 融 就 放 在 positive 队 列 。 





var effect = $.fn.animate = $.fn.fx = function(props) { 


// 将 多 个 参数 整 成 两 个 ， 第 一 参数 暂时 别 动 

var opts = addOptions.apply(null, arguments), p 

// 第 一 个 参数 为 元 素 的 样式 ， 我 们 需要 将 它们 从 CSS 的 连 字符 风格 统统 转 为 驼峰 
风格 

// 如 果 需 要 私有 前 缀 ， 也 在 这 里 加 上 

for (var name in props) { 



































p = $.cssName(name) || name; 
if (name !== p) { 
props[p] = props[name]; //¥stiborderTopwidth, sty 
leFloat 
delete props[name]; //ihlsiborder-top-width, f 
loat 
} 
} 


for (var i = 0, node; node = this[i++];) { 
// 包 含 关键 帧 的 原始 信息 的 对 象 到 主队 列 或 子 队 列 


insertFrame($.mix({ 















































positive: [], // 正 向 队列 
negative: [], // 外 队 队 列 
node: node， // 元 素 节点 
props: props //@keyframes 中 要 处 理 的 样式 
集合 
}, opts)); 


return this; 





接着 我 们 看 deleteFrame 方 法 ， 它 的 任务 束 是 把 
己 经 完成 或 强制 完成 的 动画 从 主队 列 中 删 挥 。 





function deleteFrame() { 
var i = timeline.length; 
while (--i >= 0) { 
if (!timeline[i].paused) { // 如 果 没 有 被 暂停 
if (!(timeline[i].node && enterFrame(timeline[i 





], i))) í 


timeline.splice(i, 1); 


} 


timeline.length || (clearInterval(insertFrame.id), inse 
rtFrame.id = null); 


} 








ABA OO FBT ZS NC EME? 当然 是 使 用 
animate Jy y} CO a ， 参 数 与 





jQuery 一 样 多 态 化 ， 那 也 意味 着 我 们 需要 花 些 精力 
调整 它们 成 可 用 状态 。 


调整 用 户 传 参 需 要 用 到 如 下 这 么 多 代码 。 





function addOptions(properties) { 
if (isFinite(properties)) {// 如 果 第 一 个 为 数字 
return { 
duration: properties 


}; 

} 

var opts = {}; 

// 如 果 第 二 参数 是 对 象 

for (var i = 1; i < arguments.length; i++) { 
addOption(opts, arguments[i]); 





opts.duration = typeof opts.duration === "number" ? opts.du 
ration : 400; 

opts.queue = !!(opts.queue == null || opts.queue); /7/ 默 认 进行 

opts.easing = $.easing[opts.easing] ? opts.easing : "Swing" 


return opts; 


function addOption(opts, p) { 


switch ($.type(p)) { 

case "Object": 
addCallback(opts, p, "after"); 
addCallback(opts, p, "before"); 
$.mix(opts, p); 
break; 

case "Number": 
opts.duration 
break; 

case "String": 
opts.easing = p; 
break; 

case "Function": 
opts.complete = p; 


p; 


break; 
} 
} 
function addCallback(target, source, name) { 
if (typeof source[name] === "function") { 
var fn = target[name] ; 
if (fn) { 
target[name] = function(node, fx) { 
fn(node, fx); 
source[name](node, fx); 
}; 
} else { 
target[name] = source[name]; 
} 
delete source[name]; 
} 





然后 才 进 入 到 我 们 刚才 的 insertFrame 方 法 ， 
insertFrame 会 间接 调用 enterFrame 方 法 。 由 于 它 是 
在 setInterval 内 运行 的 ， 因 此 它 才 是 动画 真正 的 实现 
者 。 





function enterFrame(fx, index) { 





7 / SBN FE BA EA 2H EB SE GSE AT Fh LA] BY ll (update ) 
// FED MZ RI, MPR hh Se ES A 
var node = fx.node, 

now = +new Date; 





if (!fx.startTime) { // 第 一 帧 
callback(fx, node, "before"); // 动 画 开始 
前 做 些 预 操作 





fx.props && parseFrames(fx.node, fx, index);  // 分 解 原始 
材料 为 关键 帧 

fx.props = fx.props || []; 

AnimationPreproccess[fx.method || "noop")](node, fx); / 
/parse 后 也 要 做 些 预 处 理 

fx.startTime = now; 

} else { // 中 间 自 动 生 成 的 补 间 

var per = (now - fx.startTime) / fx.duration; 

var end = fx.gotoEnd || per >= 1;//gotoEnd 可 以 被 外 面 的 sto 
p 方 法 操控 , 强制 中 止 

var hooks = effect.updateHooks; 

if(fx.update) { 

for (var i = 0, obj; obj = fx.props[it+]; ) {// 处 型 






























































渐变 
(hooks[obj.type] || hooks. default)(node, per, e 
nd, obj); 
} 
if (end) { // 最 后 一 帧 
callback(fx, node, "after"); // 动 画 结束 
后 执行 的 一 些 收尾 工作 
callback(fx, node, "complete"); // 执 行 用 户 
回调 
if (fx.revert && fx.negative.length) { // 如 果 设 置 
了 倒 带 


Array.prototype.unshift.apply(fx.positive, fx.n 
egative.reverse()); 


fx.negative = []; // 清空 负 
向 队列 
} 
var neo = fx.positive.shift(); 
if (!neo) { 


return false; 
}// 如 果 存 在 排队 的 动画 , 让 它 继续 
timeline[index] = neo; 
neo.positive = fx.positive; 
neo.negative = fx.negative; 


} else { 
callback(fx, node, "step"); // 每 执行 一 
tog iF KS ee i 
} 


return true; 


3 








这 里 面 涉 及 几 个 辅助 函数 ，callback 用 于 执行 
回调 ， 包 括 内 部 用 的 before 与 after， 用 户 设置 的 step 
与 complete。 


function callback(fx, node, name) { 
if (fx[name]) { 
fx[name] (node, fx); 


} 


} 





parseFrames Æ H KR AREA, IRD 
贴 出 来 了 了。 总 而 言 之 ， 束 是 从 已 有 的 材料 中 分 成 两 
TREM, FARMER, RIAN C 
前 只 是 名 字 ) 、 开 始 值 、 结 束 值 、 单 位 与 类 型 。 类 
型 分 为 3 种 ， 闫 色 值 、 深 动 与 默认 处 理 ， 根 据 它 
们 ， 程 序 会 选用 不 同 的 钩子 函数 进行 分 解 、 刷 新 。 


effect.updateHooks = { 
_default: function(node, per, end, obj) { 
$.css(node, obj.name, (end ? obj.to : obj.from + obj.ea 
Sing(per) * 
(obj.to - obj.from)) + obj.unit) 


color: function(node, per, end, obj) { 
var pos = obj.easing(per), 
rgb = end ? obj.to : obj.from.map(function(from 


, 1) { 
return Math.max(Math.min(parseInt(from + (obj.to[i] 
- from) * pos, 10), 255), O); 
}); 
node.style[obj.name] = "rgb(" + rgb + ")"; 
ty 
scroll: function(node, per, end, obj) { 
node[obj.name] = (end ? obj.to : obj.from + obj.easing( 
per) * (obj.to - obj.from)); 
} 


i 





T 
医用 


KM, Eee 
KAEA Send 


这 里 可 留意 一 下 颜色 值 的 刷新 
为 RGB 的 形式 ， 再 变 成 数组 。 刷 新 
参数 ， 用 于 立即 跳 到 最 后 一 帧 。 


He 


WEK 


BA eo AR ERS, Ab BH 6HE] 
RGB 与 颜色 名 这 3 种 。 难 点 在 于 下 的 颜色 转化 。 





var colorMap = { 
"black": [0, 0, 0], 
"gray": [128, 128, 128], 
"white": [255, 255, 255], 
"orange": [255, 165, 0], 


"red": [255, 0, 0], 
"green": [0, 128, O], 
"yellow": [255, 255, 0], 
"blue": [0, 0, 255] 

}; 


function parseColor(color) { 
var value;// 在 iframe 下 进行 操作 
$.applyShadowDOM(function(wid, doc, body) { 
var range = body.createTextRange(); 
body.style.color = color; 
value = range.queryCommandValue("ForeColor"); 





}); 
return [value & Oxff, (value & Oxff00) >> 8, (value & OxffO 


000) >> 16]; 
} 


function color2array(val) { // 将 字符 串 变 成 数组 
var color = val.toLowerCase(), 
ret = []; 
if (colorMap[color]) { 
return colorMap[color]; 





} 
if (color.indexOf("rgb") === 0) { 
var match = color.match(/(\d+%?)/g), 
factor = match[0].indexOf("%") !== -1 ? 2.55 : 
1; 
return (colorMap[color] = [parseInt(match[0]) * factor, 
parseInt(match[1]) * factor, parseInt(match[2]) * factor]); 
} else if (color.charAt(0) === '#') { 
if (color.length === 4) 
color = color.replace(/([4#])/g, '$1$1'); 
color.replace(/\w{2}/g, function(a) { 
ret.push(parseInt(a, 16)); 
+); 


return (colorMap[color] = ret); 


if (window.VBArray) { 
return (colorMap[color] = parseColor(color)); 


return colorMap.white; 


$.parseColor = color2array; 





在 enterFrame 方 法 中 有 一 个 预 处 理 的 过 程 ， 主 
要 是 用 于 show、hide 等 方法 。AnimationPreproccess 


里 面 有 4 方法 : noop、show、hide、toggle。 
noop 是个 处 理 。 


show 是 将 隐 荐 的 元 素 的 display 改 为 block 等 值 
《有 时 未 必 改 为 block， 像 li、td、tr、tbody、table 
都 有 默认 的 display 值 ， 如 果 强 行 改 block， 布 局 就 会 
走 形 ; 对 于 内 联 元 素 ，span、em 等 ， 要 使 用 它们 进 
行 缩放 操作 ， 则 要 设置 为 inline-block， 但 众 所 周 
知 ， 旧 厂 本 正 要 开局 hasLayout 才 能 生效 ， 这 又 是 一 
ERIT) 。 





hide Æ ERTAK, HEY 
动画 效果 是 从 大 到 小 ， 这 时 进行 动画 的 那个 元 素 的 
子 元 素 可 能 会 超出 父 元 又 的 大 小 ， 被 挤 出 来 。 因 此 
我 们 需要 强制 设置 它 的 overflow 为 hidden， 在 动画 
结束 后 才 还 原 〈 因 为 这 时 display 为 none， 你 怎么 玩 











也 没 人 知道 ) 。 此 外 ， 要 还 原 的 样式 值 还 有 宽 高 、 
边框 、 补 和 白 、 外 界 、 透 明度 等 值 ， 这 方便 我 们 在 
show > hide show 这样 的 连续 动画 中 能 运行 起 来 。 





toggle Hie XT PAJIC RIT show#RVE, ANTE 
素 进行 hide 操 作 。 





var AnimationPreproccess = { 
noop: $.noop, 
show: function(node, frame) { 


if (node.nodeType === 1 && $.isHidden(node)) { 
var display = $._data(node, "olddisplay"); 
if (!display || display === "none") { 


display = $.parseDisplay(node.nodeName) ; 
$._data(node, "olddisplay", display); 


} 
node.style.display = display; 
if ("width" in frame.props || "height" in frame.pro 
ps) { 
// 如 果 是 缩放 操作 
// 修 正 内 联 元 素 的 display 为 jnline-block， 让 其 可 以 进行 w 
idth/height 的 动画 渐变 
if (display === "inline" && $.css(node, "float" 
=== "none") { 





if (!$.support.inlineBlockNeedsLayout) { // 
W3C 
node.style.display = "inline-block"; 
} else { //IE 
if (display === "inline") { 
node.style.display = "inline-block" 


} else { 
node.style.display = "inline"; 
node.style.zoom = 1; 


























} 
} 
ty 
hide: function(node, frame) { 
if (node.nodeType === 1 && !$.isHidden(node)) { 
var display = $.css(node, "display"), 
s = node.style; 
if (display !== "none" && !$._data(node, "olddispla 
y")) i 
$._data(node, "olddisplay", display); 
} 
var overflows; 
if ("width" in frame.props || "height" in frame.pro 
ps) { 
// 如 果 是 缩放 操作 
// 确 保 内 容 不 会 溢出 ,记录 原来 的 overf1Low 属 性 
// 因 为 IE 在 改变 overflowX 与 overflowY 时 ，overflow 不 会 
发 生 改 变 
overflows = [s.overflow, s.overflowX, s.overflo 
wY]; 
s.overflow = "hidden"; 
} 
var fn = frame.after || $.noop; 
frame.after = function(node, fx) { 
if (fx.method === "hide") { 
node.style.display = "none"; 
for (var i in fx.orig) { // 还 原 为 初始 状态 
$.css(node, i, fx.orig[i]); 
} 
if (overflows) { 
pe", "X", "Y"].forEach(function(postfix, in 
dex) { 
s["overflow" + postfix] = overflows[ind 
ex]; 
}); 
} 
fn(node, fx); 
}; 
} 
ty 
toggle: function(node, fx) { 
$[$.isHidden(node) ? "show" : "hide"](node, fx); 


} 


人 至此， 整个 动画 引擎 瓯 完成 了 了 。 而 那些 show、 
hide、toggle、slideUp、slideDown、slideIoggle、 
show. hide. toggle. slideUp. slideDown, 
slideToggle、fadeIn、 de fadeOut 等 特效 ， 

其 实 就 是 利用 animate 这 个 主 函 数 ， 预 先 传 些 样 式 进 
去 。 比 如 fadeIn 就 是 将 i 
fadeOut 束 是 从 1 到 0，slideUp 束 是 将 高 度 逐 浙 减 为 
0，slideDown 束 是 从 0 逐渐 还 原 为 之 前 的 高 度 ， 
show 与 hide 则 是 同时 对 览 高 边界 边框 补 日 等 盒子 属 
性 与 透明 度 进 行动 画 。 














Prototype.js 的 重要 特性 script.aculo.us 可 能 是 
JavaScript 最 强大 的 动画 框架 了 ， 它 的 许多 特效 都 是 
其 他 动画 库 的 重要 参考 ， 如 表 14-1 所 示 。 











表 14-1 


| 


script.aculo.us| ”jQuery 或 说 明 
jQuery UI 


整体 扩大 一 倍 并 同时 进行 淡出 
整体 往 下 堕落 并 同时 进行 淡出 ， 最 后 不 占 空间 
像 蛇 信子 一 样 左右 震 荡 儿 下 
像 电视 关闭 时 的 收场 动画 一 样 两 边 往 中 间 靶 起 一 线 消失 
























































een 


像 升降 机 从 我 们 眼前 落下 ，jQuery UI 的 blind、slide 恰 好 与 
SlideDown blind 
script.aculo.us 的 相反 
en ae 


; 四 边 往 左上 和 角 收 缩 ， 有 时 类 似 jQuery 的 show 效 果 ， 但 
Squish show oe 
行 淡出 


度 从 下 往 上 收 起 ， 然 后 宽度 从 右 到 左 收 起 









































下 


Fold fold 先是 


中 间 一 点 向 四 边 扩张 











基本 上 script.aculo.us 能 做 的 ，jQuery UI 也 能 轻 
松 实现 。 不 过 jQuery UI 每 个 子 特效 设计 得 非常 强 
大 ， 因 此 体积 也 不 偿 多 让 。 


14.5 requestAnimationFrame 


OAR 7 OAS TF FEN a AKA PRTC VOCE, 
么 优化 ， 最 后 肯定 是 超过 指定 时 间 才 能 完成 动画 ， 
定时 器 越 多 ， 延 时 越 严 重 。 为 此 ，YUI、kissy、 
mass 等 采用 中 央 队 列 的 方式 ， 将 定时 器 减少 到 
个 。 浏 览 器 厂 丙 也 不 是 吃 系 的 ， 最 早 Firefox 也 想到 
这 点 ， 早 在 4.0 时 就 推 mozRequestAnimationFrame。 
当然 ， 它 与 现在 的 标准 相差 很 远 。 它 不 是 个 定时 
器 ， 甚 至 也 不 能 传递 回调 ， 它 只 是 用 于 触 友 
MozBeforePaint 这 个 私有 事件 。 由 于 是 浏览 器 在 维 
护 队 列 ， 它 内 部 掌握 DOM 演 染 ， 事 件 队 列 排队 等 
情况 ， 因 此 它 大 抵 能 保证 印 s 在 60 帧 上 下 。 

















<script> 
/*firefox4-10*/ 
var startTime, 
duration = 3000; 
function animate(event) { 
var now = event.timeStamp; 
var per = (now - startTime) / duration; 
if (per >= 1) { 
window. removeEventListener('MozBeforePaint', animate, 


false); 
} else { 
document.getElementById("test").style.left = Math.rou 
nd(600 * per) + "px"; 
window.mozRequestAnimationFrame(); 
} 
} 
function start() { 
startTime = Date.now(); 
window.addEventListener('MozBeforePaint', animate, false) 


window.mozRequestAnimationFrame(); 


</script> 

<button onclick="start()"> 点 我 </button> 

<div id="test" style="position: absolute; left: 10px; backgroun 
d: blue;"> go! </div> 








谷歌 友 现 这 个 思路 不 错 ， 立 即 整 到 目 己 的 


Chrome 中 去 ， 但 相对 而 言 ， 精 人 简 很 多 ， 与 最 后 定案 
的 标准 差距 很 少 。webkitRequestAnimationFrame 有 
点 像 定 时 器 ， 第 一 个 是 回调 ， 第 二 个 可 选 ， 传 执行 
动画 的 元 素 丰 点 进去 ， 返 回 一 个 ID， 然 后 允许 像 
clearTimeout 一 样 有 个 webkitCancelRequest- 
AnimationFrame 疯 数 进 行 中 止 动画 。 不 过 名 字 有 点 
长 了 ， 后 来 模仿 Firefox 一 样 使 用 cancelAnimation 
Frame, AJA Ae HU HAA BU, BU 

















webkitCancelAnimationFrame. 


<script> 
/*chrome10-23*/ 
var startTime, 
duration = 3000; 
function animate(now) { 
var per = (now - startTime) / duration; 
if(per >= 1) { 
window.webkitCancelRequestAnimationFrame(requestID); 
} else { 
document .getElementById("test").style.left = Math.round 
(600 * per) + "px"; 
window.webkitRequestAnimationFrame(animate) ;// 不 断 地 递归 
调用 animate 
} 
} 


function start() { 
startTime = Date.now(); 
requestID = window.webkitRequestAnimationFrame(animate) ; 


</script> 

<button onclick="start()"> 点 我 </button> 

<div id="test" style="position: absolute; left: 10px; backgroun 
d: red;"> go! </div> 





IE 与 Opera 起 步 最 晚 ， 直 到 IE10 才 支持 ， 不 过 
那 时 标准 已 经 成 形 ， 没 有 私有 前 级 ， 也 没有 兼容 性 
问题 。Opera 则 到 12 版 还 不 支持 。 











网 上 流行 一 个 非常 不 负责 的 写法 ， 以 为 光 是 换 
SAF IT 


window.requestAnimFrame = (function(){ 
return window.requestAnimationFrame 
window.webkitRequestAnimationFrame 
window.mozRequestAnimationFrame 
function( callback ){ 


window.setTimeout(callback, 1000 / 60); 
】 











还 有 太一 个 看 起 来 非 第 周到 的 写法 。 





(function() { 
var lastTime = 0; 
var vendors = ['webkit', 'moz']; 
for(var x = 0; x < vendors.length && !window.requestAnimati 
onFrame; ++x) { 
window.requestAnimationFrame = window[vendors[x]+'Reque 
stAnimationFrame' |; 
window.cancelAnimationFrame = 
window[vendors[x]+'CancelAnimationFrame'] || window[v 
endors[x]+'CancelRequest 
AnimationFrame' ]; 


} 


if (!window. requestAnimationFrame ) 
window.requestAnimationFrame = function(callback, eleme 

nt) { 

var currTime = new Date().getTime(); 

var timeToCall = Math.max(0, 16 - (CurrTime - lastT 
ime)); 

var id = window.setTimeout(function() { callback(cu 
rrTime + timeToCall); }, 

timeToCall); 
lastTime = currTime + timeToCall; 
return id; 


}; 


if (!window.cancelAnimationFrame) 
window.cancelAnimationFrame = function(id) { 
clearTimeout(id); 


}()); 


列 说 早期 Firefox 个 文 持 传 参 ， 它 到 Firefox11 才 
与 webkit 那 个 有 点 相近 ， 并 且 才 有 了 mozCancel 
AnimationFrame。webkit 也 有 bug， 它 在 某 个 版 本 
中 ， 葛 然 瑟 了 返回 id 给 我 们 清 际 。 在 为 一 个 版 本 友 
现 它 竟然 没有 给 回调 传 参 。 





此 外 ， 还 有 为 一 个 比较 流行 的 版 本 是 这 样 的 ， 
只 能 执行 ， 不 能 终止 。 





/* rAF shim. Gist: https://gist.github.com/julianshapiro/949751 
BFF 
var rAFShim = (function() { 

var timeLast = 0; 


return window.webkitRequestAnimationFrame || window.mozReq 
uestAnimationFrame || function(callback) { 
var timeCurrent = (new Date()).getTime(), 
timeDelta; 


/* Dynamically set delay on a per-tick basis to match 
60fps. */ 

/* Technique by Erik Moller. MIT license: https://gist 
.github.com/paulirish/1579671 */ 

timeDelta = Math.max(0, 16 - (timeCurrent - timeLast) ) 


timeLast = timeCurrent + timeDelta; 


return setTimeout(function() { callback(timeCurrent + 
timeDelta); }, timeDelta); 


ti 
HO; 








下 面 笔者 给 出 真正 可 用 的 兼容 版 本 。 














// by 司徒 正美 基于 网 友 屈 屈 与 月 影 的 版 本 改进 而 来 
// https://github.com/wedteam/qwrap-components/blob/master/anim 
ation/anim.frame.js 
function getAnimationFrame() { 
// 不 存在 msRequestAnimationFrame，IE10 与 Chrome24 直 接 用 :requestA 
nimationFrame 
if (window.requestAnimationFrame) { 
return { 
request: requestAnimationFrame, 
cancel: cancelAnimationFrame 





} 


//Firefox11- 没 有 实现 cancelRequestAnimationFrame 
// 并 且 mozRequestAnimationFrame 与 标准 出 入 过 大 
} else if (window.mozCancelRequestAnimationFrame && window. 
mozCancelAnimationFrame) { 
return { 
request: mozRequestAnimationFrame, 
cancel: mozCancelAnimationFrame 





} else if (window.webkitRequestAnimationFrame && webkitRequ 
estAnimationFrame(String)) { 
return {// 修 正 某 个 特异 的 webKit 版 本 下 没有 time 参 数 
request: function(callback) { 
return window.webkitRequestAnimationFrame( 
function() { 
return callback(new Date - 0); 








} 
); 
ty 
cancel: window.webkitCancelAnimationFrame | | 
window.webkitCancelRequestAnimationFrame 


} 
} else { 


var millisec = 25; //40fps; 
var callbacks = []; 
var id = 0, cursor = 0; 
function playAll() { 
var cloned = callbacks.slice(0); 
cursor += callbacks.length; 
callbacks.length = 0; // 清 空 队列 
for (var i = 0, callback; callback = cloned[i++]; ) 


if (callback !== "cancelled") { 
callback(new Date - 0); 
} 
} 


window.setInterval(playAll, millisec); 
return { 
request: function(handler) { 
callbacks.push(handler); 
return id++; 
ty 
cancel: function(id) { 
callbacks[id - cursor] = "cancelled"; 





当然 ，redquestAnimationFrame 不 是 没有 缺点 ， 
它 不 能 控制 fps， 比 如 我 们 做 一 些 慢 放 动 作 ， 许 多 回 
调 都 是 做 无 用 功 。 男 一 个 极端 ， 在 动作 、 枪 战 、 飞 





PEMA RM, UWA Ne ey, ee ek 
模糊 。 利 用 原始 的 setTimeout (在 IE9、IE10、 
Firefox10、Chrome 等 浏览 器 中 ， 它 的 最 短 时 钟 间隔 





已 经 压缩 至 4ms， 能 轻松 跑 100 帧 以 上 的 动画 ) ， 能 
让 画面 更 清楚 ， 细 节 通 真 ， 特 写 镜 头 丝 丝 入 扣 。 





男 外 ， 我 们 还 可 以 尝试 一 下 postMessage 这 个 异 
步 方法 ， 能 实现 超 高 度 的 动画 〈IE10 有 
setImmediate， 速 度 也 相当 不 错 ) 。 下 面 有 个 实 
验 ， 可 以 看 到 它们 的 性 能 差异 。 





<script> 
var fps_arr, fps_min, fps_max, last_time, loop_iteration; 
var testing = false; 
var fps_label; 
function stop_test() { 
testing = false; 


} 
var init_test = function init_test() { 
fps_arr = []; 


fps_min = 1000; 
fps_max = last_time = loop_iteration = 0; 
if (typeof fps _label === 'undefined') { 


fps label = document.getElementById('fps_label'); 
} 
testing = true; 
} 
function main() { 
var i, fps_avg = 0; 
var now = new Date().getTime(); 
if (last_time !== 0 && last_time !== now) { 
var fps = Math.round(1000 / (now - last_time)); 


fps_arr.push(fps); 

if (fps_arr.length > 100) { 
fps_arr.shift(); 

} 


for (i = 0; i < fps_arr.length; i++) { 


fps_avg += fps_arr[i]; 
} 
fps_avg /= fps_arr.length; 
fps_avg = Math.round(fps_avg);// 平 均 帧 数 


if (++loop_iteration > 1) { 
if (fps < fps_min) { 
fps_min = fps;// 最 小 帧 数 


} 
if (fps > fps_max) { 
fps_max = fps;// 最 大 帧 数 
} 
} 
fps_label.innerHTML = fps + ' FPS (' + fps_min + ' 


- ' + fps_max + ') PRIA ' + 
fps_avg + ']'; 
} 


last_time = now; 
} 
/* Pure Timers */ 
function run_timers() { 
main(); 
if (testing === true) { 
setTimeout(run_timers, 1); 
} 
} 


window.requestAnimFrame = 
window.requestAnimationFrame || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame; 
/* requestAnimationFrame */ 
function run_raf() { 
main(); 
if (testing === true) { 
requestAnimFrame(run_raf, 1); 
} 
} 
/* for loop */ 
function run_loop() { 
var iterations = 15; 
while (iterations--) { 
main(); 


if (testing === true) { 
setTimeout(run_loop, 1); 


} 
} 
/* postMessage */ 
function run_message() { 
main(); 
if (testing === true) { 
window.postMessage('', '*'); 


} 


window.addEventListener('message', run_message, false); 
</script> 
<p id="fps_label"># fps (# - #) [#]</p> 
<button onClick="stop_test();">Puk</button> 


<br /><br /> 
<strong>Tests</strong><br /> 
<button onClick="init_test(); 
run_timers();">Pure Timers</button> 
<button onClick="init_test(); 
run_raf();">requestAnimationFrame</button> 
<button onClick="init_test(); 
run_loop();"> Loop</button> 
<button onClick="init_test(); 
run_message();">postMessage</button> 








结果 大 致 如 下 ， 视 各 位 的 电脑 性 能 而 言 ， 如 表 
14-2 所 示 。 


表 14-2 





setTimeout requestAnimationFrame postMessage 


200 ~300 900~ 1000 








微软 官方 也 放出 使 用 高 性 能 异步 方法 
setImmediate 与 原始 SetTimeout 的 对 比 实验 ， 流 畅 度 
很 好 ， 如 图 14-3 所 示 。 


http://ie.microsoft.com/testdrive/Performance/setImmediateSorti 
ng/Default.html 


在 现实 中 ， 尤 其 是 游戏 中 ， 结 合 多 种 腊 步 API 
是 很 有 必要 的 。 比 如 作为 背景 的 树木 、 流 水 ，NPC 
用 requestAnimationFrame 实 现 ， 而 玩家 角色 ， 由 于 
需要 点 击 ， 再 配合 速度 、 体 力 、 耐 力 等 元 素 ， 其 走 
路 的 速度 是 可 变 的 ， 所 以 用 setTimeout 比 较 合 适 。 
HEAR HIZB, FY REN m Zé postMessage. 
Image.onerror. setImmediate, MessageChannel%3: 


APIS 。 





图 14-3 


14.6 CSS3 transition 


transition 是 CSS3 的 一 个 重要 模块 ， 是 CSS 对 入 
侵 行为 层 的 主要 行为 。W3C 标 准 中 对 它 是 这 样 描述 
的 : css 的 transition 允许 css 的 属性 值 在 一 定 的 
时 间 区 间 内 平滑 地 过 渡 。 这 种 效果 可 以 在 鼠标 单 
击 、 获 得 焦点 、 被 点 击 或 对 元 素 任何 改变 中 触及 ， 
并 圆滑 地 以 动画 效果 改变 css 的 属性 值 。 








transition 主 要 包含 4 个 属性 值 : transition- 
property， 样 式 名 ; transition-duration， 持 续 时 间 ; 
transition-timing-function， 绥 动 公 式 : transition- 
delay， 延 迟 多 长 时 间 才 触发 。 下 面 分 别 来 看 这 4 个 
属性 值 。 





1. transition-property 


bree VW 


transition-property 是 用 来 指定 当 元 系 其 中 一 个 
属性 改变 时 执行 transition 效 果 ， 主 要 有 以 下 几 个 





值 : none (没有 属性 改变 ) ; all (有 所 有 属性 改 
AB) ， 这 个 也 是 其 默认 值 ，indent (元 系 属 性 

名 ) 。 当 其 值 为 none 时 ，transition 马 上 停止 执行 ; 
当 指 定 为 all 时 ， 元 系 产 生 任 何 属 性 值 变 化 时 都 将 执 
4F transition; ident 古 可 以 指定 元 素 的 某 一 个 属 
性 值 。 其 对 应 的 类 型 如 下 。 





(1) 与 闫 色相 关 的 样式 ， 如 background- 


color、border-color、color、outline-color 等 。 


(2) SATEH, FAAM WIE, iTe 
关 的 样式 ， 如 word-spacing、width、vertical-align、 
top. right. bottom, left. padding. outline-width, 
margin, min-width, min-height. max-width, max- 
height, line-height. height. border-width, border- 


spacing. background-position®® . 


(3) HARE, opacity. 


(4) 变形 相关 ， 即 transform 样式 。 
(5) 阴影 ， 如 text-shadow、box-shadow。 


(6) 线性 渐变 与 径 加 渐变， 用 于 背景 色 径 问 
渐变 ， 如 -webkit-gradient、-ms-linear-gradient， 各 
Dil bet aor IE) A A FAN EAT Xo 





2. transition-duration 

动 男 持 续 时 间 ， 单 位 可 以 是 s， 也 可 以 是 ms。 
我 们 可 以 连续 写 两 个 持续 时 间 ， 对 应 两 个 不 同 的 样 
式 的 变换 。 如 : 





transition-duration: 6s 


transition-duration: 120ms 


transition-duration: 1s, 15s 


transition-duration: 10s, 30s, 230ms 


transition-duration: inherit 


3. transition-timing-function 


BANAT, IPERI E AY THESE A OLAS Ie PE Le 
换 速 率 。 它 有 6 个 可 能 的 值 。 


(1) ease: 〈 逐 渐变 慢 ) UA, ease pk AU 
AJ FW SE 7K E (0.25, 0.1, 0.25, 1.0) 。 


(2) linear: (JÆ) , linearpk #02 F Il SE 
尔 曲 线 (0.0, 0.0, 1.0, 1.0) 。 


(3) ease-in: (JME) , ease-inek 20 la] F Jl 
塞 尔 曲线 (0.42, 0, 1.0, 1.0) 。 


(4) ease-out: (减速 ) ，ease-out 函 数 等 同 于 
贝 塞 尔 曲线 CO, 0, 0.58, 1.0) 。 


(5) ease-in-out: 〈 加 速 然 后 减速 ) ，ease-in- 
out 函 数 等 同 于 贝 塞 尔 曲线 (0.42, 0, 0.58, 1.0) 。 


(6) cubic-bezier: CAE CITE EL 
个 时 间 曲 线 ) ， 特 定 的 cubic-bezier 曲 线 。 (x1 , y1, 
x2 , y2 ) 4 个 值 特定 于 曲线 上 点 P1 和 点 P 。 所 有 值 
mE [0, 1」 区 域内 ， 售 则 无 效 。 


其 中 cubic-bezier 为 通过 贝 赛 尔 曲线 来 计算 “ 转 
换 ” 过 程 中 的 属性 值 ， 如 图 14-4 所 示 ， 初 始 默 认 值 为 
default， 通 过 改变 P1 (x1, y1) 和 P， (x ,yo ) 的 
坐标 可 以 改变 整个 过 程 的 Output Percentage. 


其 他 几 个 属性 的 示意 如 图 14-5 所 示 。 
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图 14-4 





linear ease ease-in ease-out ease-in-out 


匀速 arte ROK 加 速 减速 先 加 速 后 减速 
图 14.5 


4. transition-delay 





延迟 执行 时 间 ， 可 选单 位 有 s 与 ms。 


接着 我 们 看 如 何 应 用 。 它 必须 是 放 在 基于 某 些 
延迟 触发 的 伪 类 或 后 来 才 添加 a 到 元 系 上 的 类 名 才 有 
效 。 原 因 很 简单 ， 束 是 区 分 出 初始 状态 与 结束 状 
态 。 比 如 一 个 元 素 的 背景 色 原 来 是 绿色 ， 然 后 动态 
加 了 个 类 名 或 在 hover 中 将 它 变 成 红色 ， 这 样 
transition 才 有 用 武之 地 。 








<div id="move"> 移 上 去 试 试 </div> 
<style> 
#move { 
position: absolute; 
left:0px; 


width:100px; 
height :100px; 
background:red; 
font-size: 14px; 


} 


#move:hover { 
background: green; 
font-size: 26px; 
left: 700px; 
-moz-transition: all 2s ease 0.3s; 
-webkit-transition: all 2s ease 0.3s; 
-o-transition: all 2s ease 0.3s; 
transition: all 2s ease 0.3s; 


} 
</style> 








它 的 文 持 情况 如 下 ， 基 本 上 现在 我 们 都 可 以 去 





挥 私有 前 级 使 用 ， 如 图 14-6 所 示 。 


图 14-6 


男 外 ， 浏 览 器 还 提供 了 一 个 动画 结束 事件 给 我 
AJE. 3444 HY Bootstrap HY) 2) H Wi 2 F transition 
的 。 它 的 动画 都 是 很 简单 的 淡 入 淡出 。 男 一 个 移动 
库 zepto 提 供 了 更 为 强大 的 动画 封装 。 














动画 结束 事件 的 麻烦 在 于 ， 它 的 名 字 在 各 浏览 
器 内 严重 不 一 致 ， 在 Opera 竟 然 存 在 3 种 写法 ， 如 图 
14-7 所 示 。 





图 14-7 


那么 如 何 精 确 取得 可 用 的 事件 名 呢 ? DO) a CE 
全 局 作用 域 下 暴露 了 许多 事件 的 构造 顷 ， 比 如 
MouseEvent、 MessageEvent、KeyboardEvent、 
UlEvent、 MutationEvent, PopStateEvent, 
CloseEvent, StorageEvent, WheelEvent, 
WebKitTransitionEvent, WebKitAnimationEvent 
等 。 将 这 些 构造 器 的 名 字 直 接 传 入 到 createEvent 这 
个 最 底层 的 API 中 ， 如 果 不 抛 错 ， 隋 说 明文 持 这 种 
事件 。 我 们 将 此 事件 与 对 应 类 型 组 成 个 表 ， 循 环 一 
下 就 能 得 到 可 用 事件 名 了 。 


var getTransitionEndEventName = function() { 








var obj = { 


'TransitionEvent': 'transitionend', 
"WebKitTransitionEvent': 'webkitTransitionEnd', 
'OTransitionEvent': 'oTransitionEnd', 
‘otransitionEvent': 'otransitionEnd' 

} 

var ret 








// 有 的 浏览 器 同时 支持 私有 实现 与 标准 写法 ， 比 如 webkit 支 持 前 2 种 ，0pera 支 
持 1、3、4 
for (var name in obj) { 
if (window[name] ) { 
ret = obj[name] 
break; 











} 
try { 
var a = document.createEvent(name) ; 
ret = obj[name] 
break; 
} catch (e) { 





} 
}// 这 是 一 个 惰性 函数 ， 只 检测 一 次 ， 下 次 直接 返回 缓存 结 
getTransitionEndEventName = function() { 
return ret 
} 


return ret 





alert(getTransitionEndEventName()); 








BLA FA JavaScriptik—P Jt ASR, YAR LE 
CE BK. 





<div id="test"></div> 


<br/><br/><br/><br/><br/> 
<button id="run'"> 开 始 动画 </button> 
<button id="stop"> 中 断 动 画 并 移 除 transition 效 果 </button> 
<button id="invalid"> 这 次 赋值 将 不 会 出 现 动 画 </button> 
<style> 

#test{ 


width:100px; 
height :100px; 
position: absolute; 
background: red; 
left:0; 
-moz-transition: left 5s; 
-o-transition:left 5s; 
-webkit-transition:left 5s; 
transition:left 5s; 
} 
</style> 
<script> 
var $ = function(a) { 
return document.getElementById(a) 


} 

var el = $("test") 

$("run").onclick = function() { 
el.style.left = "700px" 


$("stop").onclick = function() { 


var left = window.getComputedStyle(el, null).left; 
el.style.left = left; // 和 暂停 


pu", "-moz-", "-o-", "-webkit-"].forEach(function(prefi 


x) { 


el.style.removeProperty(prefix + "transition" ) 


}) 


$("invalid").onclick = function() { 
el.style.left = "340px"; 
} 


</script> 








上 面 的 实验 暴露 出 transition 的 弱点 了 ， 虽 然 暂 
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停 时 我 们 是 通过 取 当 时 值 再 重 赋 的 手段 实现 了 ， 但 
只 要 transition 这 个 样式 没有 被 清除 挥 ， 那 么 每 一 次 
变动 left 这 个 样式 值 都 会 发 生动 画 。 而 想 移 除 








transition 这 个 样式 ， 唯 有 它 是 写 在 标签 时 ， 我 们 才 
能 通过 removeProperty 的 方法 实现 ， 如 果 它 是 定义 
于 内 部 样式 或 外 部 样式 ， 那 束 不 好 人 处理 了 。 如 果 外 
部 样式 还 是 跨 域 7 了， 那么 删除 样式 规则 的 这 一 手段 
也 失灵 了 。 因 此 这 动画 的 transition 可 控 度 太 兰 ， 不 
适宜 作为 一 个 框架 的 动画 引擎 的 实现 手段 。 














14.7 CSS3 animation 


animation 是 CSS3 另 一 个 重要 的 模块 ， 它 成 形 
得 比 transition 晚 ， 吸 引 Y Flashy chemi ERS, FF 
克服 了 transition 的 一 些 缺 聊 ， 实 用 性 非常 高 。 
animation 是 一 个 复合 样式 ， 它 可 以 细 分 为 8 个 更 细 
的 样式 ， 情 况 与 background 和 background-color、 
background-position、background-repeat、 
background-attachment、background-image 的 关系 相 
Mio 
1. animation-name 


它 所 制约 的 是 关键 帧 样式 规则 的 名 字 ， 关 键 帧 
样式 规则 也 束 是 以 @keyframes 开 头 的 样式 规则 。 
animation-name 可 以 同时 对 应 多 个 关键 帧 样式 规则 
名 ， 以 “，” 写 分 开 ， 说 明 此 样式 规则 对 多 个 关键 帧 
样式 规则 都 有 效 。 


2. animation-duration 


动 男 持续 时 间 ， 单 位 是 为 $s 或 ms， 与 transition 
相仿 。 


3. animation-timing-function 
绥 动 公式 ， 请 参看 transition 同 名 项 目的 讲解 。 
4. animation-delay 


动 男 延迟 多 和 久 才 开 始 ， 此 时 间 不 计 入 


animation-duration. 


5. animation-iteration-count 

动画 播放 次 数 ， 值 可 以 为 正 整 数 或 infinite， 默 
认 只 执行 一 次 。 这 是 一 个 很 好 的 设计 ， 不 像 
transition， 只 要 对 指定 样式 重新 赋值 ， 束 会 触 友 总 
外 的 动画 执行 。 


6. animation-direction 





动画 执行 的 方向 ， 有 4 个 值 : normal, 
alternate. reverse. alternate-reverse. normale 44 
次 都 是 从 第 1 帧 (@keyframes #O%EKfrom, p5, 
浏览 器 会 目 动 补 上 )〉 开始 。alternate， 这 个 值 显然 
在 animation-iteration-count 的 值 大 于 1 时 才 有 效 ， 它 
是 指 动画 像 钟 摆 一 样 从 0% 一 100%， 下 次 再 从 1009%6 
一 0%， 再 一 次 又 是 0% 一 100%..…..reverse， 这 个 有 
兼容 问题 ，animation 最 早 是 由 Safari 及 明 的 CSS 样 
式 ， 写 最 早 制 定 的 规范 中 并 没有 reverse 这 个 值 ， 它 
的 行为 与 normal 相 反 ， 每 次 都 是 从 100% 开 始 。 
alternate-reverse， 也 有 兼容 性 问题 ， 行 为 也 是 一 个 
HE, BRAL% F0%, FARE% 100% 





7. animation-fill-mode 


指 动画 跑 完 一 圈 〈 从 0% 一 100%6 或 从 100% 一 
0%) 后 ， 是 保持 动画 前 的 状态 forwards， 还 是 此 时 
的 状态 backwards。 








8. animation-play-state 


用 于 暂停 (paused) 或 继续 (running) 此 动 
H| 。 


除了 最 后 2 个 ， 前 6 个 可 以 连 写 在 一 块 ， 如 图 
14-8 所 示 。 





animation-direction 
nimationaduration] fanimationsdelay] 
>. W. 
=n ye 20s ease-in-out 2s infinite a ernate 
minaitn ritncomt 


animation-name 


animation-timing-function 








图 14-8 


此 外 ，animation 还 配套 了 3 种 事件 ， 分 别 用 于 
开始 时 Canimationstart) 、 结 束 时 
Canimationend) 、 重 复 播 放 时 
(animationiteration) 。 当 然 ， 这 些 事 件 名 可 能 不 
能 直接 用 ， 需 要 加 上 私有 前 级 。 基 于 上 一 市 对 
transitionend 取 名 字 的 经 验 ， 这 也 不 是 什么 难事 。 


var getAnimationEndEventName = function() { 
// 大 致 上 有 两 种 选择 
//TE10+, Firefox 16+ & Opera 12.1+: animationend 
//Chrome/Safari: webkitAnimationEnd 
//http://blogs.msdn.com/b/davrous/archive/2011/12/06/introd 
uction-to-css3-animations.aspx 
//IE10t FY LAE FEMSAnimationEndiit, (All MSE type 依 然 为 ani 
mationend 
// el.addEventListener("MSAnimationEnd", function(e) { 
// alert(e.type)// animationend! ! ! 
// }) 
var obj = { 
'AnimationEvent': 'animationend', 
'WebKitAnimationEvent': 'webkitAnimationEnd' 








ret ; 

(var name in obj) { 

if (window[name] ) { 
ret = obj[name]; 
break; 








} 
}// 这 是 一 个 惰性 函数 ， 只 检测 一 次 ， 下 次 直接 返回 缓存 结果 
getAnimationEndEventName = function() { 
return ret; 





J 


return ret; 





以 下 代码 可 以 不 断 将 一 个 正方 体 变 成 圆 形 ， 然 
后 圆 形 再 变 成 正方 形 ， 周 而 复 始 .……. 








<div id="test"></div> 
<style> 
#test{ 
width:100px; 
height :100px; 
background: red; 
-webkit-animation: circle 1s infinite alternate; 


animation: circle 1s infinite 


} 
@-webkit-keyframes circle{ 
100%{ 
-webkit-border-radius: 50px; 
} 
@keyframes circlef{ 
100%{ 
border-radius: 50px; 
} 
} 


</style> 





alternate; 


14.8 mass Framework 基 于 CSS 的 动画 引 
ai 





本 章 最 后 一 条 ， 我 们 尝试 利用 CSS3 animation 
做 个 动画 引擎 。 基 于 浏览 器 的 动画 API， 性 能 比较 
高 ， 尤 其 在 移动 端 ， 它 的 优势 焉 更 明显 了 。 由 于 
animation 在 IE10 才 文 持 ， 因 此 如 有 果 想 应 用 于 PC 应 ， 
目 己 要 做 一 下 适 配 。 如 有 果 条 件 不 满足 ， 则 退回 基于 
JavaScript 的 动画 引 苟 。 如 果 我 们 的 框架 是 基于 
AMD， 这 个 实现 起 来 就 很 简单 了 。 











首先 ， 我 们 看 一 下 判定 和 条件， 方便 切换 。 上 面 
说 过 ， 浏 览 右 把 所 有 事件 类型 的 构造 器 都 放 在 
window, AAWAA WA, FIA 
Object.getOwnPropertyNames 加 filter 一 下 子 就 能 得 到 
所 有 事件 构造 器 。 不 难看 出 ， 只 要 存在 
window.AnimationEvent 或 


winodw.WebKitAnimationEvent 就 可 以 使 用 我 们 基 








于 CSS 的 动画 引擎 。 另 一 个 方法 是 判定 有 没有 
keyframe 样 式 规 则 的 构造 器 ， 它 也 是 放 在 window 
上 ， 我 们 利用 短路 或 把 它 所 有 可 能 的 名 字 都 放 在 一 
起 就 能 判定 出 来 。 


var ok = window.MozCSSKeyframeRule || window.WebKitCSSKeyframeR 
ule || window.CSSKeyframeRule; 


用 CSS 实 现 动 画 引 擎 ， 有 有 几 个 好 处 :; EA tS 
绥 动 参数 给 你 用 ;不 用 你 计算 原始 值 ， 它 目 行 内 音 
计算 ; 磊 色 值 不 用 你 转换 为 RBG 数 组 ， 如 果 想 做 倒 


带动 画 ， 那 么 直接 设置 animation- iteration-count 为 

















2，animation-direction 为 alternate 就 行 了 ; 像 hide 这 
个 特效 需要 我 们 在 动画 结束 时 ， 将 原来 的 进行 动画 
的 样式 还 原 为 初始 值 ， 在 CSS3， 我 们 只 需 
animation-fill-mode 设 置 为 backwards; 至 于 暂停 与 


继续 ， 其 实 就 是 控制 animation-play-state 的 事 。 











与 JavaScript 动 画 引 擎 相 比 ，CSS 动 画 引擎 在 操 


作 元 系 进 行动 画 时 是 通过 添加 类 名 与 插入 样式 规则 
实现 的 。 由 于 已 进入 IE10 时 代 ， 我 们 可 以 直接 使 用 
el.classList.add 来 添加 类 名 ， 动 态 插 入 样式 可 以 有 点 
偏 门 ， 但 在 支持 animation 的 浏览 器 中 ， 相 关 API 已 
经 没有 兼容 性 问题 了 。 


在 浏览 部 中 ， 有 两 个 元 素 能 生产 样式 表 ，link 
与 style。 我 们 可 以 通过 访问 其 sheet 来 访问 其 样式 表 
对 象 ， 然 后 在 它 的 下 面 有 个 CSSRules 类 数组 对 象 ， 
里 面 束 包含 所 有 样式 规则 。 为 了 方便 操作 ， 我 们 把 
动画 引擎 和 目 己 产 生 的 样式 规则 全 部 放 到 一 个 动态 插 
入 的 style 元 叉 中 ， 以 后 删除 束 在 这 个 元 素 里 面 找 ， 
这 样 可 以 减少 一 重 届 历 。 而 样式 规则 人 至少 有 5 种 类 
型 ， 看 以 下 代码 。 











,move { 
animation: move 4s linear; 


keyframes move { 
from { margin-left:-20%; } 
to { margin-left:100%; } 


} 
font-face { 
font-family: 'YourWebFontName' ; 


src:url('YourWwebFontName.eot?') format('eot');/*IE*/ 
src:url('YourWwebFontName.woff') format('woff'), url('YourW 
ebFontName.ttf') format ('truetype');/*non-IE*/ 
} 
@media screen { 
#element { background: lightgreen; 
} 





从 上 到 下 依次 是 CSSStyleRule、 
CSSKeyframesRule, CSSFontFaceRule, 
CSSMediaRule. Jl >, CSSKeyframesRulexh #2 tik 
着 以 百分比 命名 的 CSSKeyframeRule。 
CSSStyleRule 是 最 早 的 类 型 ， 我 们 可 以 通过 其 





selectorText 取 得 指定 的 样式 规划， 比如 这 里 
selectorText 为 .move。CSSKeyframes- Rule 束 是 以 
@keyframes 〈 视 浏览 器 也 可 能 是 @-webkit- 
keyframe. @-moz-keyframe) 开头 的 样式 规则 ， 我 
们 可 以 通过 专 有 的 name 属 性 判定 。 它 里 面 指定 进度 
该 呈现 的 样式 规则 ， 用 户 在 定义 时 可 能 用 到 to、 
from， 但 到 DOM 时 全 部 转换 为 日 分 比 了 ， 它 们 可 
以 通过 keyText 属 性 进行 区 分 。CSSFontFaceRule 用 





于 加 载 自 定 义 字 体 ，CSSMediaRule 则 应 用 于 著名 的 
啊 应 式 布 局 ， 这 两 个 都 没有 什么 名 字 可 区 分 。 不 过 
没关系 ， 我 们 只 用 到 最 前 面 两 个 。 








下 面 mass Framework 用 于 操作 样式 规则 的 方 








https://github.com/RubyLouvre/mass -Framework/blob/master/fx_neo 
.js 
var styleElement; 
function insertCSSRule(rule) { 
// 动 态 插入 一 条 样式 规则 
if (styleElement) { 
var number = 0; 


try { 
var sheet = styleElement.sheet;// styleElement.styl 








e Sheet; 

var cssRules = sheet.cssRules; // sheet.rules; 
number = cssRules.length; 
sheet.insertRule(rule, number); 

} catch (e) { 
$.log(e.message + rule); 

} 

} else { 

styleElement = document.createElement("style"); 

styleElement.innerHTML = rule; 

document.head.appendChild(styleElement ) ; 


} 


function deleteCSSRule(ruleName, keyframes) { 
// 删 除 一 条 样式 规则 
var prop = keyframes ? "name" : "selectorText"; 
var name = keyframes ? "@keyframes " : "cssRule ";// 调 试用 
if (styleElement) { 
var sheet = styleElement.sheet;// styleElement.styleShe 





et; 
var cssRules = sheet.cssRules;// sheet.rules; 
for (var i = 0, n = cssRules.length; i < n; i++) { 
var rule = cssRules[i]; 


if (rule[prop] === ruleName) { 
sheet.deleteRule(i); 
$.1og(" 已 经 成 功 删除 " + name +" " + ruleName); 
break; 

} 

J 
} 
} 


function deleteKeyFrames(name) { 
// 删 除 一 条 @keyframes 样 式 规则 
deleteCSSRule(name, true); 

} 











接着 是 引擎 的 主 函 数 ，4.fn.animtate， 我 们 要 
设计 与 jQuery 保持 一 致 ， 降 低 学 习 成 本 ， 也 意味 着 





需要 花 许 多 代码 处 理 参数 多 态 化 。 还 要 考虑 如 何 实 
现 排 队 。 以 前 我 们 是 放 在 一 个 中 央 队 列 中 ， 每 一 个 
元 系 都 是 一 个 很 复杂 的 对 象 ， 用 于 分 解 成 天 键 帧 。 
现在 我 们 没有 必要 搞 队 列 了 ， 我 们 可 以 在 元 系 的 
animationend 回 调 中 自动 执行 下 一 个 动画 ， 所 有 排 
队 的 动画 全 部 放 到 元 素 对 应 的 缓存 体 中 了 束 行 了 。 





function addOption(opts, p) { 
switch (typeof p) { 


case "object": 
$.mix(opts, p); 
delete p.props; 
break; 

case "number": 
opts.duration = p; 
break; 

case "string": 
opts.easing = p; 
break; 

case "function": 
opts.complete = p; 
break; 


} 


function addOptions(duration) { 
// 这 里 与 JavaScript 动 画 引 擎 大 同 小 异 
var opts = {}; 
for (var i = 1; i < arguments.length; i++) { 
addOption(opts, arguments[i]); 





} 

duration = opts.duration; 

duration = /4\d+(ms|s)?$/.test(duration) ? duration + "" 
"1000ms"; 

if (duration.indexOf("s") === -1) { 

duration += "ms"; 

} 

opts.duration = duration; 

opts.effect = opts.effect || "fx"; 

opts.queue = !!(opts.queue == null || opts.queue); // 默 认 使 用 
队列 

opts.easing = easingMap[opts.easing] ? opts.easing : "easel 


n"; 
return opts; 


} 





上 面 用 到 一 个 easingMap 对 象 ， 里 面包 含 Robert 





Penner 整 理 的 所 有 绥 动 公式 名 及 其 对 应 的 贝 暑 尔 曲 


线 实 现 。 由 于 CSS 动 画 引擎 体积 很 少 ， 我 们 有 足够 
空间 将 它们 全 部 打包 。 


var easingMap = 
"linear": [0.250, 0.250, 0.750, 0.750], 
"ease": [0.250, 0.100, 0.250, 1.000], 
"easeIn": [0.420, 0.000, 1.000, 1.000], 
"easeOut": [0.000, 0.000, 0.580, 1.000], 
"easeInOut": [0.420, 0.000, 0.580, 1.000], 
S1 ee ewe 
"custom": [0.000, 0.350, 0.500, 1.300], 


"random": [Math.random().toFixed(3), 
Math. random().toFixed(3), 
Math. random().toFixed(3), 
Math. random().toFixed(3) ] 





此 外 ， 外 国 还 有 些 网 站 提供 可 视 化 的 界面 让 你 
目 己 设计 喜欢 的 曲线 。 


eA LESS HAY AY A eR BL 


startAnimation, nextAnimationstopAnimation. 


startAnimation， 用 于 立即 执行 此 元 素 的 动画 ， 
具体 做 法 是 分 解 原始 材料 构建 两 个 样式 规则 ， 一 个 
是 用 于 集中 定义 动画 的 运作 情况 ， 为 一 个 是 定义 第 





— Wht SB a EE ETE 2 NE SL) Ze AF 
通 的 CSSStyleRule，selectorText 为 一 个 类 名 ， 方 便 
添加 到 目标 元 系 上 ， 另 一 个 不 用 说 是 
CSSKeyframesRule。 由 于 是 多 个 元 素 共用 此 类 名 ， 
如 采样 式 表 有 此 类 名 ， 我 们 束 不 用 重复 分 解 与 插入 
了 。 这 里 我 们 可 以 做 个 flag! 最 后 我 们 要 绑 定 一 下 
animationend 事 件 ， 在 它 的 回调 中 保存 指定 样式 到 
元 系 的 style 中 ， 然 后 移 除 类 名 (因为 类 名 对 应 的 样 
式 规则 迟早 会 被 移 除 ， 因 此 必须 将 它们 转移 到 内 联 
样式 里 ) ， 并 调用 nextAnimation 与 stopAnimation 。 

















NextAnimation， 决 定 是 否 调用 startAnimation， 


里 面 有 个 setTimeout， 用 于 模拟 delay 效 果 。 


stopAnimation， 用 于 移 除 startAnimation 插 入 的 
两 个 样式 规则 。 





var AnimationRegister = {}; 

function startAnimation(node, id, props, opts) { 
var effectName = opts.effect; 
var className = "fx_" + effectName + "_" + id; 


var frameName = "keyframe_" + effectName + "_" + id; 


var hidden = $.css(node, "display") === "none"; 
var preproccess = AnimationPreproccess[effectName ] ; 


if (typeof preproccess === "function") { 
var ret = preproccess(node, hidden, props, opts); 
if (ret === false) { 
return; 
} 
} 
// 各 种 回调 
var after = opts.after || $.noop; 
var before = opts.before || $.noop; 
var complete = opts.complete || $.noop; 


var from = [], 
to = []; 
var count = AnimationRegister[className]; 
node[className] = props;// 保 存 到 元 素 上 ， 方 便 stop 方 法 调用 
// 让 一 组 元 素 共用 同一 个 类 名 
if (!count) { 
// 如 果 样 式 表 中 不 存在 这 两 条 样式 规则 
count = AnimationRegister[className] = 0; 
$.each(props, function(key, val) { 
var selector = key.replace(/[A-Z]/g, function(a) { 
return "-" + a.toLowerCase(); 
}); 
var parts; 
//4hŒshow, toggle, hide 3 个 特殊 值 















































if (val === "toggle") { 
val = hidden ? "show" : "hide"; 
if (val === "show") { 
from.push(selector + ":0" + ($.cssNumber[key] ? 
"n : "ox" )); 
} else if (val === "hide") { //hide 
to.push(selector + ":0" + ($.cssNumber[key] ? " 
" : "px" )); 


} else if (parts = rfxnum.exec(val)) { 
var delta = parseFloat(parts[2]); 
var unit = $.cssNumber[key] ? "" : (parts[3] || 
"px" ); 

if (parts[1]) { // 操 作 符 
var operator = parts[1].charAt(0); 
var init = parseFloat($.css(node, key)); 
try { 

delta = eval(init + operator + delta); 

} catch (e) { 





$.error(" 使 用 -=/+= 进 行 递增 递减 操作 时 ,单位 只 
能 为 px，deg"，TypeError ) ; 
} 


} 
to.push(selector + ":" + delta + unit); 
} else { 

to.push(selector + ":" + val); 
+); 
var easing = "cubic-bezier( " + easingMap[opts.easing | 

+ " Jan 

//CSSStyleRule 的 模板 
var classRule = ".#{className}{ #{prefix}animation: #{f 


rameName} #{duration} #{easing} " +"#{count} #{direction}; #{pr 
efix}animation-fill-mode:#{mode} }"; 
//CSSKeyframesRule 的 模板 
var frameRule = "@#{prefix}keyframes #{frameName}{ 0%{ 
#{from}; } 100%{ #{to}; } }"; 
var mode = effectName === "hide" ? "backwards" : "forwa 
rds"; 
// 填 空 数据 
var rule1 = $.format(classRule, { 
className: className, 
duration: opts.duration, 
easing: easing, 
frameName: frameName, 
mode: mode, 
prefix: prefixCSs, 
count: opts.revert ? 2 : 1, 
direction: opts.revert ? "alternate" : "" 
}); 
var rule2 = $.format(frameRule, { 
frameName: frameName, 
prefix: prefixCsSs, 
from: from.join("; "), 
to: to.join(";") 


}); 
insertCSSRule(rule1); 
insertCSSRule(rule2); 
} 
AnimationRegister[className] = count + 1; 
$.bind(node, animationend, function fn(event) { 
$.unbind(this, event.type, fn); 
var styles = window.getComputedStyle(node, null); 
// 保存 最 后 的 样式 





for (var i in props) { 
if (props.hasOwnProperty(1)) { 
node.style[i] = styles[i]; 


} 
node.classList.remove(className); // 移 除 类 名 
stopAnimation(className); // 尝 试 移 除 keyframe 
after(node); 
complete(node); 
var queue = $._data(node, "fxQueue"); 
if (opts.queue && queue) { // 如 果 在 列 状 ,那么 开始 下 一 个 动画 


queue.busy = 0; 
nextAnimation(node, queue); 
} 
}); 
before(node); 
node.classList.add(className) ; 


} 





这 里 面 有 两 个 flag，AnimationRegister 里 面 装 





着 许多 类 名 ， 类 名 的 值 为 数字 ， 表 示 有 多 少 个 元 系 
在 共用 它 。 我 们 只 有 在 这 个 值 为 零 时 进行 分 解 与 插 
入 样式 规则 。 然 后 每 当 动 画 结 束 时 ， 这 个 值 束 减 

， 归 和 零 时 我 们 就 移 除 它们 。 第 二 个 flag 是 缕 存 体 
中 的 动画 队列 中 busy， 进 行动 男 或 被 延迟 时 为 真 
值 ， 其 他 时 间 为 假 值 ， 我 们 只 有 在 假 时 ， 才 能 进入 
执行 startAnimation 的 分 支 。 








在 startAnimation 里 ， 有 时 还 会 调用 
AnimationPreproccess 里 面 的 预 处 理 函 数 ， 因 此 
CSS3 规 定 display 为 none 的 元 际 无 法 进行 动画 ， 因 此 
我 们 想 实 现 show 特 效 ， 需 提前 修改 display 值 。hide 
特效 也 要 求 我 们 对 overflow 做 些 处 理 。 总 体 上 说 比 
JavaScript 动 画 引 擎 简单 多 了 。 








nextAnimation 与 stopAnimation 的 源码 如 下 。 





function nextAnimation(node, queue) { 
if (!queue.busy) { 
queue.busy = 1; 
var args = queue.shift(); 
if (isFinite(args)) {// 如 果 是 数字 
setTimeout(function() { 
queue.busy = 0; 
nextAnimation(node, queue); 
}, args); 
} else if (Array.isArray(args)) { 
startAnimation(node, args[0], args[1], args[2]); 
} else { 
queue.busy = 0; 


function stopAnimation(className) { 
var count = AnimationRegister[className]; 
if (count) { 
AnimationRegister[className] = count - 1; 
if (AnimationRegister[className] <= 0) 
var frameName = className.replace("fx", "keyframe" ) 


deleteKeyFrames(frameName) ; 
deleteCSSRule("." + className); 











最 后 ， 我 们 看 看 delay、pause、resume 这 几 方 
法 是 如 何 实现 的 。 


var playState = $.cssName("animation-play-state"); 
$.fn.delay = function(number) { 

return this.fx(number ); 
3; 


$.fn.pause = function() { 
return this.each(function() { 
this.style[playState] = "paused"; 
+); 
}; 


$.fn.resume = function() { 
return this.each(function() { 
this.style[playState] = "running"; 





一 切 束 是 这 么 简洁 。 


当然 ， 基 于 CSS 的 动画 引擎 不 是 没有 人 缺点， 上 
如 它 对 scrollTop 、scrollLeft 的 动画 就 无 能 为 力 ， 
们 是 元 素 的 属性 。 此 外 ， 我 们 也 无 法 对 canvas 元 素 








里 面 的 矢量 图 形 进行 动画 。 要 想 打 包 这 一 切 ， 我 们 
需要 一 个 更 强大 的 动画 引擎 。 但 canvas 还 涉及 stage 
等 概念 ， 个 人 觉得 还 是 针对 它 打 包 专 用 的 引擎 比较 
好 








有 了 基于 CSS 的 动画 引擎 ， 我 们 残 可 以 安心 使 
用 CSS3 的 transform2D 或 3D， 要 不 用 JavaScript 来 实 
现 ， 在 旧版 本 正 下 连 2D 也 很 揭 强 。 因 为 浏览 器 对 元 
系 进 行 变形 ， 是 基于 矩阵 ， 而 不 是 rotate、Sscale、 
translate 等 原始 函数 。 标 准 浏 览 右 好 办 ， 
getComputedStyle 直 接 转换 ， 正 需要 目 己 提取 参数 
值 ， 转 换 角 大 为 弧度 ， 使 用 万 能 和 滤 阵 小 镜 也 惨 分 今 
的 ， 另 外 ， 变 形 中 心 Ctransform-origin) 也 很 难 调 
校 。 如 果 两 个 连续 的 动画 都 涉及 变形 ， 那 就 是 矩阵 
相 乘 。 这 里 哗啦 啦 束 要 几 百 行 ， 来 实现 矩阵 的 加 减 
乘除 .…… 

















矩阵 相 乘 后 ， 我 们 还 得 把 这 些 值 还 原 为 


rotate. scale, translate. skew T AKES. FE 
http://www.w3.org/TR/css3-transforms/ix Œ, RATEI 
以 看 到 如 何 分 解 与 还 原 窍 阵 的 伪 代 码 。 显 然 ， 这 一 
切 加 起 来 ， 证 我们 的 引擎 增加 千 行 。 这 还 不 算 
transform3D。 不 过 ， 它 本 来 就 无 法 在 旧版 本 正 下 实 
现 。 


企 webkit 与 [E10 中 ， 各 提供 了 一 个 CSSMatrix 类 
(WebKitCSSMatrix 与 MSCSSMatrix) ， 里 面包 含 
了 我 们 所 有 想 要 的 方法 ， 否 则 自己 实现 有 点 残酷 ， 
如 图 14-9 所 示 。 





目前 只 是 看 IE11 是 否 文 持 WebGL J, WRX 
持 ， 到 时 肯定 会 提供 更 多 的 窍 阵 方 法 ， 我 们 的 引擎 
玩 3D 才 有 意义 。 





最 后 奉 上 当今 最 出 名 的 动画 库 一 览 表 ， 如 图 
14-10 所 示 。 
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人 们 总 是 爱 探 求 完 美的 东西 ， 编 程 界 也 有 上 自己 
的 退 求 ， 如 完美 的 架构 从 MVC 到 MVP， 再 到 
MVVM。 当 然 MVC、MVP、MVVM 有 它们 不 同 的 
场景 ， 但 MVVM 在 微软 试 水 后 已 被 证 实 为 界面 开发 
最 好 的 方案 。 本 章 将 探索 MVVM 的 一 般 实现 方案 。 


15.1 前端 模板 (静态 模板 ) 


说 起 MVVM， 了 就 不 得 不 说 起 其 前 身 MVC 与 
MVP， 如 图 15-1 所 示 。 





MVP 模 式 MVC 模 式 


图 15-1 


MVC 与 MVP 最 大 的 区 别 是 减少 关注 点 ， 基 本 
上 只 有 Presenter 在 变动 。 但 不 管 怎么 样 ， 前 端 框 沪 
最 重要 的 目的 是 将 页 面 泻 染 出 来 。 “这 
染 ”(render) 这 个 词 最 初 不 是 前 端的 东西 。 前 端 之 
前 叫做 切 图 ， 将 设计 师 做 的 PSD 变 成 一 个 静态 页 
面 ， 然 后 加 上 动态 交互 。 但 是 我 们 有 许多 数据 是 来 





自 后 端 ， 如 何 将 数据 加 入 静态 页 面 呢 ? 于 是 又 多 了 
一 套 工 序 叫 “ 套 页 面 ”。 套 页 面 的 过 程 实际 就 是 将 彰 
态 页 面 切割 成 耕 干 功能 块 ， 每 一 块 都 是 一 个 php、 
jsp 或 vm 文 件 ， 它 们 是 后 端 模板 引擎 的 处 理 对 象 ! 
其 实 模 板 是 不 局 限于 后 端 还 是 前 端的 ， 模 板 的 本 质 
是 用 于 从 数据 (变量 ) 到 实际 的 视觉 表现 C 
HTML 代码 ) 这 项 工作 的 一 种 实现 手段 。 由 于 后 
端 近水楼台 先 得 月 〈 取 数据 比较 方便 ) ， 因 此 先 在 
后 端 发 展 出 这 种 技术 。 这 些 后 端 模板 文件 是 活动 于 
服务 器 的 ， 然 后 经 过 复杂 的 处 理 ， 最 后 由 浏览 器 泻 
染 出 来 。 这 时 的 演 染 是 将 服务 器 拼接 好 的 静态 文本 
变 成 一 个 DOM 树 的 过 程 。 























如 果 要 前 端 实 现 MVC 或 MVP 或 MVVM， 那 些 
工序 必须 上 友 生 改变 。 静 态 文 件 产 出 是 不 变 的 ， 尤 其 
是 大 公司 ， 分工 够 细 ， 有 专门 的 切 图 组 将 它们 做 出 
来 。 接 着 是 套 页 面 ， 这 时 就 不 能 使 用 后 端 模板 引 
莹 ， 需 要 引入 前 端 模板 引擎 。 由 于 实现 一 个 前 端 模 


板 引擎 太 简单 了 ， 经 过 多 年 的 发 展 ， 已 经 有 众多 好 
用 的 < 轮子"。 


https://github.com/janl/mustache.js 


基于 JavaScript 的 Logic-less (JR ati 
辑 ) 模板 。 


https://github.com/twitter/hogan.js 


上 面 的 优化 版 ，twitter 出 品 。 


https://github.com/wycats/handlebars.js 


完全 兼容 mustcache 的 语法 。 


https://github.com/paularmstrong/swig 


拥有 更 强悍 的 模板 继承 与 block 重 写 功 能 。 








https://github.com/mozilla/nunjucks 


跟 django 的 模板 系统 相似 ， 可 以 说 swig 的 升级 
版 ， 是 gitbook 的 御用 前 端 模板 。 


其 他 推荐 的 还 有 ejs， 易 学 易 用 ， 对 有 过 
ASP/PHP/JSP 编 程 经 验 的 人 来 说 ， 非 第 亲切 自然 ， 








其 他 的 如 doT、xtempalate、Underscore 


Templates. 


最 不 推荐 是 jade， 有 点 华而不实 ， 过 度 设计 ， 
导致 套 页 面 工 作 量 大 ， 人 性 能 其 差 。 


虚拟 DOM 时 代 流 行 的 JSX 就 是 无 逻辑 模板 。 之 
所 以 流行 无 馆 辑 或 轻 逻 辑 模板 ， 其 主要 原因 是 改动 
成 本 比较 少 ， 像 jade 这 样 自 造 语法 糖 太 多 ， 从 美工 
手中 拿 来 的 HTML 需要 大 动 和 干戈， 进行 摊 心 折 骨 毁 














的 改造 才能 套数 据 。 对 于 模板 来 襄 ， 最 简单 而 言 ， 
束 是 将 某 个 可 变数 据 放 到 适当 的 地 方 (填空 ) ， 
而 其 次 ， 可 以 控制 这 个 区 域 输出 不 输入 〈 半 指令 

) ， 或 让 其 个 区 域 循 环 输入 多 次 (for 指令 ) ， 更 
mel, SCUBA BAH Cayout 与 block ) . A) 
实现 if 与 for 有 两 种 方法 ， 一 种 是 单纯 的 区 域 ， 插 入 
一 个 JS 语 句 ， 里 耐 有 i 语句 与 for 语 句 ， 男 一 种 是 使 
用 语法 糖 ， 比 如 说 ms-for、ms-repeat、ng-if、ng- 
repeat。 语 法 糖 的 用 法 比 直 接 使 用 JS 语句 简单 ， 但 
是 带 来 的 是 学 习 成 本 与 拓展 功能 。 每 一 个 模板 站、 
for 指 令 的 语法 都 不 一 样 的 ， 并 且 你 想 在 循环 做 一 些 
处 理 ， 比 如 过 小 一 些 数据 ， 或 突然 在 某 处 中 汤 ， 这 
叉 得 引用 一 些 新 的 语句 。 随 着 模板 要 求 前 后 共用 ， 
束 有 了 传输 成 本 ， 直 接 写 JS 语 句 在 模板 里 面 肯定 比 
不 过 语法 糖 。 因 此 基于 这 种 种 原因 ，mustache 风 格 
REA AIL A ERE o 


























现在 3 种 模板 风格 。PHP/ASP/JSP 风 格 。 


<% if ( list.length ) { %> 
<ol> 
<% for ( n=0; n<list.length; ++n ) { %> 
<li> 
<%= list[n] %> 
</li> 


<% } %> 
</ol> 
<% } %> 











mustcache)X\t4, HAVE AER, iy ER eM 
拓展 。 


{{#if list.length}} 
<ol> 
{{#each list item}} 
<li> 
{{ item }} 
</li> 
{{/each}} 
</ol> 


{{/if}} 





属性 绑 定 风格 。 


<ol ms-if="list.length"> 
<li ms-for="item in list"> 
{{item}} 


</li> 


</ol> 





前 两 者 只 能 出 现 于 Script、textarea 等 容器 元 素 
内 部 。 因 此 < 分 隅 符 与 标签 的 < 容器 造成 冲突 ， 并 且 
也 不 利于 IDE 的 格式 化 处 理 。 属 性 绑 定 风格 则 是 
MVVM 时 期 最 流行 的 模板 定义 风格 ， 某 页 面 某 个 区 
域 束 是 一 个 模板 ， 不 需要 进行 入 append 等 操作 。 





我 们 再 来 看 如 何 实现 前 端 模板 。 前 端 模 极 的 本 
质 束 是 一 个 可 以 转换 函数 的 字符 串 ， 这 个 函数 放 进 
一 个 充满 数据 的 对 象 后 ， 还 原 为 一 个 全 新 的 字符 
早 。 因 此 重点 是 如 何 构 建 一 个 泻 染 函数 。 最 简单 的 
方式 是 正则 ， 还 记得 第 二 章 的 format 方 法 吗 ， 这 克 
是 一 个 轻型 的 填充 数据 的 方法 。 








function format(str, object) { 
var array = Array.prototype.slice.call(arguments, 1); 
return str.replace(/\\?\#{([4{}]+)\}/gm, function(match, na 
me) { 


if (match.charAt(0) == '\\') 
return match.slice(1); 
var index = Number(name) 
if (index >= 0) 
return array[index]; 
if (object && object[name] !== void 0) 
return object[name]; 
return ''! 


}); 


po 


format 方 法 是 通过 #{f } 来 划分 静态 内 容 与 动态 
内 容 的 ， 一 般 来 说 它们 称 之 为 定 界 从 delimiter 
) 。#{ 为 前 定 界 符 ，} 为 后 界 符 ， 这 个 #{} 其 实 是 
ruby 风 格 的 定 界 符 。 通 常 的 定 界 符 是 &1t;% 与 %&gt; 
» {{5}} 。 通 常 在 前 定 界 符 中 还 有 一 些 修饰 符 
号 ， 比 如 = 号 ， 表 示 这 个 会 输出 到 页 面 ，- 号 ， 表 示 
会 去 抒 两 旁 的 空白 。 将 下 例 ， 要 编译 成 一 个 泻 染 函 
数 。 











你 好 ,我 的 名 字 啊 <%name%>， 今年 已 经 <%info.age%> 岁 了 ' 


var tpl = ' 
var data = { 
name: "司徒 正美 "， 
info: { 
age: 20 
} 
} 





大 抵 十 这 样 。 





var body = ' 你 好 ,我 的 名 字 叫 '+ data.name+ '， 今 年 已 经 '+data.info.ag 
et 
var render = new Function('data', 'return '+ body) 


pO 


或 者 聪明 一 点 ， 使 用 数组 来 join。 


var array = ['return '] 
array .push(' 你 好 ,我 的 名 字 叫 ') 
array.push(data.name) 
array .push('， 今 年 已 经 ') 


array.push(data.info.age) 
array.push( ' 岁 了 ') 
var render = new Function('data', array.join('+')) 








xT K HAS AAS AE eA data. 前 
级 。 这 一 步 可 以 用 正则 来 做 ， 也 可 以 用 纯 和 字符 串 。 
我 们 试 一 下 纯 字 符 串 方式 。 假 令 前 定 界 符 为 
openTag， 后 定 界 人 符 为 closeTag， 通 过 indexOf 与 
slice 方 法 ， 残 可 以 将 它 切 成 一 块 块 。 











function tokenize(str) { 


var openTag = '<%' 
var closeTag = '%>' 
var ret = [] 
do { 
var index = str.indexOf(openTag) 
index = index === -1 ? str.length : index 


var value = str.slice(0, index) 
// 抽 取 {{ 前 面 的 静态 内 容 
ret.push({ 

expr: value, 




















type: ‘text' 


}) 
/V 改 变 str 字 符 串 自身 
str = str.slice(index + openTag. length) 
if (str) { 
index = str.indexOf(closeTag) 
var value = str.slice(0, index) 


// 抽 取 {{ 与 }} 的 动态 内 容 





ret.push({ 
expr: value.trim(),//JSW@# ASN AA Wee 
type: 'js' 

}) 

// 改 变 str 字 符 串 自 身 


str = str.slice(index + closeTag.length) 


J 
} while (str.length) 
return ret 


console.log(tokenize(tpl)) 





¥ [Object, Object, Object, Object, Object] 


v 0: Object 
expr: "at, RAZPR" 
type: "text" 
> _proto_: Object 
v1: Object 
expr: “name" 
type: "js" 
> _proto_: Object 
v 2: Object 
expr: "， 今 年 已 经 " 
type: "text" 
> _proto__: Object 
v 3: Object 
expr: "info.age" 
type: "js" 
> _proto_: Object 
v 4: Object 
expr: "#7" 
type: "text" 
> __proto__: Object 
ength: 5 


>  proto_;: Array [0] 


然后 通过 render 方 法 将 它们 拼接 起 来 。 


function render(str) { 
var tokens = tokenize(str) 
var ret = [] 
for (var i = 0, token; token = tokens[it+]; ) { 
if (token.type === 'text') { 
ret.push('"' + token.expr + '"') 
} else { 


ret.push(token.expr) 


console.log("return "+ ret.join('+')) 


} 








打印 出 来 如 下 。 


return "你 好 ,我 的 名 字 叫 "+name+"， 今年 已 经 "+info,age+" 岁 了 " 








这 个 方法 还 不 完整 。 首 移 只 是 在 两 劳 加 上 双 引 
写 是 不 可 徘 的 ， 万 一 里 面 还 有 双 引 号 怎么 办 。 因 此 
我 们 需要 引入 第 二 章 介绍 的 quote 方 法 ， 当 类 型 为 文 
本 时 ，ret.push(+quote(token， expr)+) 。 其 次 需 


要 对 动态 部 分 的 变量 加 上 .data 。 怎 么 知道 它 是 一 





个 变量 呢 ? 我 们 回想 一 下 变量 的 定义 ， 束 是 以 _、 


$ 或 字母 开头 的 字符 组 合 。 为 了 简洁 起 见 ， 我 们 暂 
时 不 用 理会 中 文 的 情况 。 不 过 ，info.age 这 个 字符 
串 里 面 ， 其 实 有 两 个 符合 变量 的 子囊 ， 而 只 需要 在 
info 前 面 加 data. 。 这 时 ， 我 们 需要 设法 在 匹配 变 
量 前 ， 将 对 象 的 子 级 属性 符 换 挨 ， 答 换 成 不 符合 变 
量 的 字符 ， 然 后 再 蔡 换 回去 。 为 此 ， 笔 者 摘 了 一 个 
dig 与 fi 方法 ， 将 子 级 属性 变 成 ??12 这 样 的 字符 
FF 








var quote = JSON,stringify// 自 己 到 第 二 章 找 完整 函数 
var rident = /[$a-zA-Z_][$a-zA-Z0-9_]*/g 
var rproperty = /\.\s*[\w\.\$]+/g 
var number = 1 
var rfill = /\?\?\d+/g 
var stringPool = {} 
function dig(a) { 
var key = '??' + number++ 
stringPool[key] =a 
return key 
} 
function fill(a) { 
return stringPool[a] 
} 
function render(str) { 
stringPool = {} 
var tokens = tokenize(str) 
var ret = [] 
for (var i = 0, token; token = tokens[i++]; ) { 
if (token.type === 'text') { 
ret.push(quote(token.expr)) 
} else { 











// 先 去 掉 对 象 的 子 级 属性 ,减少 干扰 因素 

var js = token.expr.replace(rproperty, dig) 

js = js.replace(rident, function (a) { 
return 'data.' +a 





}) 
js = js.replace(rfill, fill) 
ret.push(js) 

} 


console.log("return " + ret.join('+')) 


} 
render (tpl) 





输出 为 如 下 代码 。 


return "你 好 ,我 的 名 字 叫 "+data.name+"， 今 年 已 经 "+data,info,age+" 岁 了 ， 





最 后 ， 我 们 修改 一 下 后 面 两 行 ， 得 到 我 们 梦 魅 
以 求 的 泻 染 函 数 ， 它 的 实现 过 程 比 format 方 法 复杂 
多 了 ， 但 却 是 所 有 扩展 性 极 强 的 前 站 模板 的 一 般 实 


现 过 程 。 





function render(str){ 


return new Function("data", "return " + ret.join('+')) 


var fn = render(tpl) 
console. log(fnt"") 
console. log(fn(data) ) 


pO 


function anonymous(data 
/**/) { 
return "你 好 ,我 的 名 字 叫 "+data,name+"'， 今 年 已 经 “+data. info.age+"S T" 


你 好 ,我 的 名 字 叫 司徒 正美 ， 今 年 已 经 20 岁 了 


我 们 再 看 一 下 如 何 引 入 循环 语句 ， 比 如 将 上 面 
的 模板 与 数据 改 成 这 样 。 


var tpl = "你 好 ,我 的 名 字 叫 <%name%>， 今年 已 经 <%info ,age%> 岁 了 ,喜欢 <% 
for(var i = 0, el; el = list[it++];){%><% el %> <% } %>' 
var data = { 
name: "司徒 正美 "， 
info: { 


age: 20 


了 
List: [苹果 ", "ane" "E 





LIN BAT a as DP SA, AN EP) 
的 动态 内 容 ， 这 在 token 方 法 中 做 一 些 修改 。 





value = value.trim() 
if (/A(if|for|})/.test(value)) { 
ret.push({ 
expr: value, 
type: 'logic' 


}) 
} else { 
ret.push({ 
expr: value, 





但 render 方 法 怎么 修改 好 呢 ， 显 示 这 时 继续 用 
十 已 经 不 行 了 ， 人 否则 下 场 是 这 样 。 





return "你 好 ,我 的 名 字 叫 "+data.name+"， 今 年 已 经 "+data.info.age+" 岁 了 
,喜欢 "+for(var i = 0, el; el = list[i++];){+""+data.el+" "+} 





我 们 需要 借用 数组 ， 将 要 输入 的 数据 Ctext, js 
类 型 ) 放 进 去 ，logic 类 型 不 放 进 去 。 





function addPrefix(str) { 


// 先 去 掉 对 象 的 子 级 属性 ,减少 干扰 因素 

















var js = str.replace(rproperty, dig) 
js = js.replace(rident, function (a) { 
return ‘data.' +a 


}) 

return js.replace(rfill, fill) 
} 
function addView(s) { 

return '_ data .push(" + s + ')' 
} 


function render(str) { 

stringPool = {} 

var tokens = tokenize(str) 

var ret = ['var _ data = []'] 

tokens. forEach(function(token) { 
if (token.type === 'text') { 

ret.push(addView(quote(token.expr) ) ) 

} else if (token.type === 'logic') { 




















// 逻 辑 部 分 都 经 过 addPrefix 方 法 处 理 
ret.push(addDataPrefix(token.expr) ) 

} else { 
ret.push(addView(addPrefix(token.expr) ) ) 

















}) 
ret.push("return _ data__.join('')") 
console.log( ret.join('\n')) 

} 


var fn = render(tpl) 





得 到 的 内 部 结构 是 这 样 的 ， 显 然 addPrefix 方 法 
题 ， 我 们 应 该 过 滤 掉 让 、for 等 关键 字 与 保留 


var _ data = [] 
data_ ,push(" 你 好 ,我 的 名 字 叫 "”) 
data__.push(data.name) 
data__.push(", 今年 已 经 ") 
__.push(data.info.age) 
__.push("# 7, Bx") 
data.for(data.var data.i = 0, data.el; data.el = data.list[data 
.i++]){ 


data__.push("") 
data__.push(data.el) 
data__.push(" ") 


__data__.join('') 





但 即使 我 们 处 理 把 关键 字 与 保留 字 ， 对 于 中 间 
生成 i、el 怎 么 区 分 昵 ? 是 区 分 不 了 的 。 于 是 目前 有 





两 种 方法 ， 一 是 使 用 with， 这 时 我 们 就 不 需要 
加 data. 前 级 。 第 二 种 引入 新 的 语法 ， 比 如 ， 前 面 
征 @ WLR Adata 。 





先 看 第 一 种 。 


function render(str) { 
stringPool = {} 
var tokens = tokenize(str) 
var ret = ['var _data__ = [];', ‘with(data){'} 
for (var i = 0, token; token = tokens[it+]; ) { 
if (token.type === 'text') { 
ret.push(addView(quote(token.expr) ) ) 
} else if (token.type === 'logic') { 
ret.push(token.expr ) 
} else { 
ret.push(addView(token.expr ) ) 


} 
ret.push(')') 
ret.push('return _ data__.join("")') 
return new Function("data", ret.join('\n')) 
} 
var fn = render(tpl) 
console.log(fn + "") 
console. log(fn(data) ) 





function anonymous(data 

/**/) { 

var _data_ = []; 

with(data){ 

data__ ,push(" 你 好 ,我 的 名 字 叫 ") 
data__.push(name) 

data__..push(", $B% ") 
data__.push(info.age) 
data__.push("S 7, Bx") 

or(var i = ð, el; el = list[i++];){ 


_data_. push("' ft 
__data__.push(el) 
__data__.push(" ") 


eturn __ data_.join("") 


你 好 ,我 的 名 字 岂 司徒 正美 ， 今 年 已 经 20 岁 了 ,喜欢 苹果 FR BR 


许多 迷你 模板 都 是 用 with 减少 替换 工作 。 


第 二 种 方法 ， 使 用 引导 符 @ , avalon2 就 是 这 人 么 
用 的 。 这 样 addPrefix 方 法 可 以 减少 许多 代码 。 相 对 
应 ， 模 板 也 要 改动 一 下 。 





var tpl = "你 好 ,我 的 名 字 叫 <%@name%>， 今年 已 经 <%@info .age%> 岁 了 , 喜 
欢 <% for(var i = 0, el; el = @list[i++];){%><% el %> <% } %>' 
var rguide = /(4|[4\w\u00cO-\uFFFF_])(@|##)(?=[$\w] )/g 
function addPrefix(str) { 
return str.replace(rguide, '$1data.') 


} 


function render(str) { 
stringPool = {} 
var tokens = tokenize(str) 
var ret = ['var _ data = [];' 
for (var i = 0, token; token = tokens[it+]; ) { 
if (token.type === 'text') { 
ret.push(addView(quote(token.expr) ) ) 
} else if (token.type === 'logic') { 
// BO A waddPref ix Aye bE 
ret.push(addPrefix(token.expr ) ) 























} else { 
ret.push(addView(addPrefix(token.expr) ) ) 
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ret.push('return _ data .join("")') 
return new Function("data", ret.join('\n')) 
} 
var fn = render(tpl) 
console.log(fn + "") 
console. log(fn(data) ) 





function anonymous(data 

/*x/) { 

var _data__ = []; 

_ data__.push(" 你 好 ,我 的 名 字 叫 ”") 
__data_.push(data.name) 
_data_.push(", SBB ") 
__data__.push(data. info.age) 
__data_.push("# 7 , Bx") 
for(var i = 0, el; el = data. list [i++];){ 
__data__.push("") 
__data__.push(el) 
__data__.push(" ") 


return _ data_.join("") 
} 


你 好 ,我 的 名 字 吧 司徒 正美 ， 今 年 已 经 20 岁 了 ,喜欢 苹果 FR BR 





第 二 种 比 第 一 种 的 优势 在 于 ， 性 能 更 高 ， 并 且 
避 开 ES5 严 格 模式 的 限制 。 


我 们 再 认真 思考 一 下 ， 其 实 循环 语句 与 条 件 语 
人 句 ， 不 单 是 for、if 两 个 ， 还 有 while、do while. else 
等 。 因 此 这 需要 优化 ， 也 有 两 种 方法 。 第 一 种 是 ， 
添加 更 多 语法 符合 ， 比 如 上 面 所 说 的 = 驶 是 输出 ， 








没有 则 不 输出 。 这 是 ASP/JSP/PHP 等 模板 采用 的 手 


FX o 


if (value.charAt(0) === '=') { 
ret.push({ 
expr: value, 
type: 'js' 


}) 
} else { 
ret.push({ 
expr: value, 
type: 'logic' 
}) 





男 一 种 ， 使 用 语法 糖 ， 如 #each(el,，index) 
in @list , ‘#eachEnd’, ‘#if’, ‘#ifEnd’. EMS) 





tokenize 方 法 。 
if (value.charAt(0) === '#') { 
if (value === '#eachEnd' || value === '#ifEnd') { 
ret.push({ 
expr: '}', 
type: 'logic' 
}) 
} else if (value.slice(0, 4) === '#if ') { 
ret.push({ 
expr: 'if(' + value.slice(4) + '){', 
type: 'logic' 
}) 
} else if (value.slice(0, 6) === '#each ') { 


var arr = value.slice(6).split(' in ') 
var arrayName = arr[1] 


var args = arr[0].match(/[$\w_]+/g) 
var itemName = args.pop() 
var indexName = args.pop() || '$index' 


value = ['for(var ', ' = 0;', '<' + arrayName + '.lengt 
h;', '++){'].join(indexName) + 
"\nvar ' + itemName + ' = ' + arrayName + '[' + 
indexName + '];' 
ret.push({ 
expr: value, 
type: 'logic' 
}) 
} 
} else{ 
//... 





对 应 的 模板 改 成 如 下 代码 。 


var tpl = ' 你 好 ,我 的 名 字 叫 <%@name%>， 今 年 已 经 <%@info.age%> 岁 了 ,喜欢 
<%#each el in @list %><% el %> <% #eachEnd %>' 
var fn = render(tpl) 


console.log(fn + "") 
console. log(fn(data) ) 





function anonymous(data 
/**/) { 

var _data_ = []; 

_data__,.push(" 你 好 ,我 的 名 字 则 ") 
__data__.push(data.name) 

__data_.push(", 4488 ") 

__data__.push(data. info.age) 
__data__.push(" 7 , BR") 

for(var $index = 0;$index<data. List. Length; $index++) { 
var el = data. List [$index]; 

__data_.push("") 

__data__.push(el) 

__data__.push(" ") 

} 


return _ data__.join("") 
} 


你 好 ,我 的 名 字 叫 司徒 正美 ， 今 年 已 经 20 岁 了 ,喜欢 苹果 GFR SR 


可 能 有 人 溪 #for、#forEnd 这 样 的 语法 糖 比 较 
丑 ， 没 问题 ， 这 个 可 以 改 ， 主 要 我 们 的 tokenize 方 
法 足够 强大 ， 就 能 实现 mustache 这 样 的 模板 引擎 。 
但 所 有 模板 引擎 也 基本 上 是 这 么 实现 的 ， 有 的 还 文 
FP peas, ate Ejs 类 型 的 语句 再 进行 处 理 ， 将 
| 后 面 的 字符 器 再 切 制 出 来 。 





如 果 虚 拟 DOM 呢 ? 那 就 需要 一 个 html parser, 
这 个 工程 巨大 ， 比 如 reactive 这 个 库 ， 早 期 不 使 用 
html parser 与 虚拟 DOM， 只 有 3、4 干 行 ， 加 入 这 些 
炫 酷 功 能 后 就 达到 16000 行 。 返 回 一 个 字符 串 与 返 
回 一 个 类 似 DOM 树 的 对 象 树 结构 是 不 一 样 的 。 





15.2 MVVM 的 动态 模板 


早期 前 端 模 板 都 是 静态 模板 。 静 态 模板 都 是 返 
回 一 个 字符 串 ， 然 后 通过 innerHTML 对 目标 区 域 进 


Fy A ie HULA A ERR 


el.innerHTML = templateString 


大 家 回忆 一 下 第 二 章 所 说 的 nnerHTML， 这 东 
西 太 多 bug。 因 此 我 们 最 好 用 jQuery 的 html 方 法 进行 
蔡 换 操作 。 但 即便 这 样 ， 毅 态 模 板 的 效率 还 是 很 低 
下 ， 并 且 和 存在 如 下 几 个 隐患 。 





© 破坏 了 对 事件 的 绑 定 。 
。 伏 坏 了 原 区 域 的 选区 与 沦 标 。 
。 伏 坏 了 原 区 域 的 第 三 方 组 件 。 





随 着 jQuery 的 地 位 日 蔓 巩 固 ， 大 家 可 以 安心 用 


jQuery 作为 公司 的 标准 库 ， 然 后 利空 时 间 研 究 其 
他 东西 。 这 个 时 间 冒 出 许多 东西 。 比 如 说 上 面 提 到 
的 众多 前 问 模 板 ， 各 种 UI 库 ， 还 有 语言 扩展 库 
Cunderscore) 。 复 杂 的 交互 需要 大 量 的 3， 人 们 
开始 研究 如 何 大 规模 组 织 前 端 工程 ， 于 是 这 时 期 最 
伟大 的 产物 ，require.js 出 现 了 。 





其 实 require.js 不 站 出 来 ， 许 多 一 些 我 们 现在 不 
知道 的 库 也 在 做 同样 的 事 。 统 一 整个 社区 的 JS 文件 
的 编写 形式 ， 他 们 管 这 叫做 模块 。 每 个 模块 都 要 声 
明 自 己 所 依赖 的 另外 的 JS 文件 ， 及 将 自己 的 东西 提 
供给 别人 优雅 地 调用 (重要 一 点 是 不 污染 全 局 作用 
域 ) 。 





与 redquire.js 一 起 成 长 的 是 Node.js， 让 更 多 后 端 
加 入 。 更 多 后 端 加 入 意味 痢 更 多 经 过 塔 训 的 专业 大 
脑 加 进来 。 许 多 有 20 年 经 验 的 程序 员 ， 把 后 端的 那 
一 僚 直 接 复制 过 来 ， 于 是 有 了 一 大 堆 JavaScript 


MVC 框架 。 那 时 还 流行 一 篇 文章 《12 球 优秀 的 
JavaScript MVC 框 涤 评 估 》， 介 绍 了 当时 的 各 种 
MVC 框 架 ， 如 图 15-2 所 示 。 





图 15-2 


这 时 knockout.js 与 angular 就 进入 人 们 的 眼帘 
了 。Knockout.js 是 在 2011 年 MIX11 大 会 上 发 布 的 ， 
算是 历史 最 悠久 的 。angular 则 更 上 晚 些 发 布 ， 但 听 说 
2009 年 束 在 内 部 使 用 了 。 但 不 管 knockout 还 是 
angular， 它 们 都 有 一 个 特点 ， 需 要 页 面 添加 许多 特 
殊 的 标记 。 它 们 被 官方 称 为 指令 或 绑 定 属性 。 那 片 











区 域 其 实 束 是 MVVM 的 动态 模板 了 。 所 有 框架 都 在 
解决 关注 点 分 离 ， 并 且 关 注 点 越 少 越 好 。 经 典 的 3 
层 染 构 ， 由 展现 屋 、 业 务 逻 辑 层 和 持久 层 构 成 ， 其 
中 体现 了 我 们 对 用 户 界 面 、 业 务 逻 辑 和 数据 持久 的 
关注 点 分 离 。 而 MVVM 架 构 ， 和 希望 只 有 一 个 关注 
点 ， 其 他 都 是 被 动 改 变 。MVVM 中 的 VM， 我 们 下 
一 节 详 细 介 绍 。 现 在 回 到 动态 模板 上 。 动 态 模 板 是 
MVVM 的 视图 层 ， 它 的 特点 是 能 最 小 化 刷新 。 哪 个 
变量 发 生 改 动 ， 那 么 只 有 涉及 变量 的 属性 值 ， 
nodeValue 才 会 改变 。 于 是 就 没有 原来 表 态 模板 的 
三 大 副作用 ， 性 能 上 也 大 为 提升 。 

















由 于 操作 对 象 是 属性 值 ，nodeValue 或 单独 几 
个 要 循环 生成 的 元 素 节 点 。MVVM 在 页 面 刚 完成 泻 
染 时 ， 束 会 遍历 整个 DOM 树 ， 将 它 感 兴趣 的 元 素 
《 即 被 指令 标识 的 那些 节点 ) 全 部 收集 起 来 。 然 后 
对 指令 进行 解析 ， 转 换 为 求 值 函数 ， 传 入 数据 ， 
EIA, FRCL, Pee PS Ae 














更 新 了 ! 因此 动态 模板 是 没有 产生 一 个 完整 的 字符 
串 或 一 片 DOM， 而 是 通过 指令 产生 了 许多 细小 的 
求 信函 数 、 刷 新 函数 ， 通 过 关隘 这 些 函 数 与 数据 与 
节点 的 关系 ， 实 现 视图 更 新 的 。 这 种 关联 方法 惑 是 
WES BRS, SPARE RY DR AR CTS, (EE 
Bere APRIL. AERAJN, SERE 
MEERA! RAAB, EL HRP 
电线 将 农村 连接 在 一 起 ， 如 图 15-3 所 示 。 








表达 式 转换 为 将 求 值 函数 的 值 
TEK 放 进 指令 声明 的 
刷新 男 数 





刷新 函数 
指令 包含 表达 式 会 更 新 节点 


节点 上 面 有 指令 


节点 





图 15-3 


var fn = parseExpr(binding.expr) 
var value = fn(data) 
var update = getUpdate(binding. type) 


update(binding.element, value) 





15.2.1 求 值 水 数 


如 果 大 家 用 过 avalon 或 angular， 会 看 到 ms - 


attr-title="el + 222" . ng-attr-title= "el+ 


222" 这 样 的 东西 。 这 就 是 指令 。 指 令 是 什么 呢 ? 一 
个 标记 。 标 记 它 会 对 当前 元 素 进 行 怎么 样 的 操作 
We? 通 弟 指令 是 以 元 到 属性 的 形式 存在 ， 但 angular 
存在 多 种 指令 形式 ，tagName、comment、 
attribute、className 与 双人 花 括 号 形式 的 插值 。 
MVVM 框 架 通 常 有 一 个 扫描 过 程 ， 将 所 有 它 感 兴趣 
的 元 又 进行 收集 。 这 个 扫 摘 与 收集 后 面 会 次 。 而 这 
些 它 感 兴趣 的 元 素 都 是 带 有 指令 的 。 


























以 属性 形式 的 指令 为 例 ， 通 溃 我 们 称 之 为 绑 定 
属性 ， 它 以 等 号 为 分 隅 ， 分 为 属性 名 与 属性 值 两 
大 部 分 。 属 性 名 又 多 以 ms- 、ng- 、: FA, Ril 
称 之 为 前 级 ， 它 唯一 的 作用 是 告诉 框架 ， 它 是 绑 定 
属性 。 紧 接着 是 绑 定 属 性 的 类 型 ， 它 告诉 框架 ， 以 
后 要 使 用 什么 刷新 函数 来 加 工 或 刷新 这 个 节点 。 紧 
接着 是 额外 的 传 参 ， 这 个 是 可 选 的 。 最 后 是 属性 值 
部 分 ， 它 被 称 为 表达 式 ， 有 时 候 它 还 带 有 过 小 器， 
基本 上 都 是 使 用 UNIX 下 的 管道 符 风 格 。 一 个 表达 











TUR Ay He Sas EE De HE 
少 包括 类 型 与 表达 式 两 部 分 。 所 有 指令 部 会 转换 
为 一 个 绑 定 对 象 。 








一 个 绑 定 对 象 的 结构 大 致 如 图 15-4 所 示 。 


params Mes 
Ñ 日 








vm 扫描 时 获取 的 数据 集合 ) 


图 15-4 


执行 流程 是 这 样 的 ， 表 达 式 会 转换 为 求 值 函 数 
(通常 命名 为 get ) ， 传 入 数据 与 额外 传 参 得 到 
(i, UREN, WAR ERROR LEN Is 
P BURKHE SUR BOE ALA MT eA BCP. JH. 
这 个 值 会 保存 下 来 ， 放 到 绑 定 对 象 上 。 当 一 次 数据 


发 生变 动 时 ， 会 进行 新 值 与 日 值 比较 ， 决 定 它 是 合 
进入 刷新 函数 这 一 步 。 








一 个 完整 的 绑 定 对 象 ， 它 是 在 第 一 次 被 执行 后 
获取 其 他 额外 成 员 ， 如 图 15-5 所 示 。 


操作 流程 大 概 如 下 。 


if(!binding.get){ 
binding.get = parseExpr(binding.expr, binding.vm) 


} 
var value = binding.get(binding.vm, binding.param) 
if(binding.value !== value) { 
binding.value = value 
if (binding. filter) { 
value = binding.filter(value) 


binding.update(binding.element, value) 


} 





param Mk% 


filters 过 滤器 


get 求 值 图 数 《〈 通 过 expr 得 到 ) 


> 通过 expr 得 到 
update 刷 新 函数 通过 type 得 到 ) 
请 过 set 得 到 
Ai 





value 之 前 的 值 〈 通 过 get 得 到 ) 
vm《〈 扫 描 时 获取 的 数据 集合 ) 


图 15-5 


通 冲 来 说 刷新 函数 是 框架 内 置 的 ， 有 多 少 种 绑 





定 属 性 就 对 应 多 少 刷新 函数 。 而 求 值 函数 则 需要 我 
们 转换 。 这 个 转换 与 上 节 我 们 提 到 的 前 端 模板 转换 
为 演 染 函数 很 相似 ， 都 是 将 字符 串 变 成 函数 。 但 如 
条 从 经 典 的 MVVM 人 角度 出 及， 这 个 构建 方式 又 有 一 
点 不 一 样 。 但 不 管 怎 么 说 ， 上 次 给 出 的 转换 函数 确 
实 不 太 完 整 。 接 独 下 来 ， 我 们 摘 一 个 完整 的 ， 能 
于 生产 环境 的 方法 。 








将 一 个 表达 式 变 成 一 个 函数 ， 不 是 单单 在 前 面 
加 上 一 个 “return” 这 么 简单 的 。 经 典 的 MVVM 是 存 
在 一 个 依赖 收集 的 过 程 ， 需 要 触发 访问 器 属性 的 
getter 方 法 ， 因 此 需要 将 变量 前 置 。 


el + 222 


实际 上 会 变 成 如 下 代码 。 


var el = vm.el // 进 行 依赖 收集 
return el + 222 





这 样 它 就 能 解决 下 面 的 三 元 表达 式 问 题 。 


这 里 扼要 说 明 一 下 什么 叫 依赖 收集 ， 束 是 将 
AIA TU AS TH HOR, SSR SBR REAR, W 
PUT AMER, ERIT EB RTE, MAT 
PIU © 





通常 表达 式 里 不 需要 记 else 语 句 ， 也 不 要 用 注 
释 〈 这 个 在 文档 里 说 明 一 下 ， 要 移 除 JS 的 注释 太 难 
T) ， 但 为 了 预防 起 见 ， 所 有 干扰 因素 部 要 去 除 
H ak) PS Hee 


(1) 干 挥 所 有 正则 ， 这 个 网 上 有 现成 的 正则 
可 用 。 





(2) 干 挥 所 有 字符 串 ， 这 个 也 有 现成 的 正 
则 ， 但 不 太 好 用 ， 建 议 实现 一 个 方法 来 处 理 。 


(3) 干掉 所 有 对 象 的 子 属性 。 
(4) THAT A RET SRE 
(5) 干 挥 所 有 操作 符 与 数字 。 


(6) 去 挥 与 利用 hasOwnProperty 进 行 过滤 变 量 
与 局 部 变量 〈 吏 是 之 前 说 的 ，i、el 问 题 ) 。 








ms-attr-title="aaa == null ? '111': String(aaa+bbb)" 





得 到 表达 式 。 


aaa == null ? '111': String(aaa+bbb) 


EFEM, BREET 


aaa === null ? : String(aaatbbb) 


ARETE 


aaa String aaa bbb 


去 重 。 


aaa String bbb 


最 后 通过 vm.hasownProperty(elL) ， 得 到 aaa、 
bb 。 


https://www.zhihu.com/question/29743491/answer/49301464 


从 实际 代码 来 看 ， 则 是 这 样 。 


TT 


第 一 步 ， 用 正则 来 干 挥 正则 字面 量 。 


var rregexp = /(A|[A/])\/(?!\/)(\L. +2] |\\. IAANNNANI)+ /Tgimyu 


]{0,5}(?=\s*($|[\r\n, .7]))))/9 


第 二 步 ， 用 正则 或 函数 干 挥 字符 串 字 耐量 。 


var rstring = /("[')(A\AM(2:\r\n| [\ww])| (21X1) [A\A\r\n])*\17/ 


{AIX -MIEMISEA TESS, THM PE mse 
库 中 找 其 他 正则 ， 也 不 如 意 。 于 是 后 来 笔者 又 写 了 
这 个 方法 ， 里 面 的 dig 参 数 束 是 上 一 节 的 dig 函 数 。 
这 种 一 个 个 字符 串 进行 读 入 的 方法 ， 也 就 是 经 典 的 
分 词 手段 ， 原 始 并 高 效 。angular 的 源码 里 整个 
parser 吏 是 这 样 实现 的 。 


























function clearString(str, dig) { 
var array = readString(str) 
for (var i = 0, n = array.length; i < n; i++) { 
str = str.replace(array[i], dig) 


} 


return str 


} 


function readString(str) { 
var end, s = 0 
var ret = [] 
for (var i = 0, n = str.length; i < n; i++) { 
var c = str.charAt(1) 
if (!end) { 


if (c 二 二 二 Wwe ") { 
end 二 "IN 
S Svi 
} else if (c === '"') { 
end 二 INI 
s=i 


} 
} else { 
if (c === '\\') { 
i += 1 
continue 


if (c === end) { 
ret.push(str.slice(s, i + 1)) 
end = false 


} 
t 


return ret 





第 三 步 ， 干 挥 子 级 属性 。 也 是 正则 ， 参 观 上 一 
市 的 正则 。 








RUS CARAT SRT, MR fat, 
我 们 先 弄 一 个 hashmap， 然 后 用 正则 进行 抠 空 处 
HE 








//avalon,one0bject 方 法 见 第 一 章 
var keyMap = avalon.oneObject("break, case, catch, continue, debugg 
er,default,delete,do, else,false," + 

"finally, for, function, if,in, instanceof, new, null, return, 
Switch, this," + 





"throw, true, try, typeof, var, void,while,with," + /* 关键 字 
*/ 

"abstract, boolean, byte, char, class, const, double, enum, exp 
ort,extends," + 

"final, float, goto, implements, import, int, interface, long, 
native," + 

"package, private, protected, public, short, static, super, sy 
nchronized," + 

"throws, transient, volatile" ) 


"aaa,+,var, undefined,eee,,".replace(/\w+/g, function(key){ 
if (keyMap[key] ){// 这 就 是 抠 空 得 理 
return ' '! 
} 


return key 


























}) 





第 五 步 干 挥 操作 符 与 数字 ， 也 是 正则 。 


var rnumber = /\b\d[4, ]*/g 

//from prism.js 

var rnumber = /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+- ]?\d+)?)\b/ig 
//from jQuery ,js 

var rnumber = /[+-]?(?:\d*\.|)\d+(?: [eE][+-]?\d+]|)/g 

var roperator = /--?|\+\+?| !=?=?|<=? | >=? | ==?=?|&&?|\|\|?|\2|\*] 


\7|~|\4]%/g 
// 大 中 小 括号 、 冒 号 、 AS 
var rpunctuation JE OTN; (),.:1/9 























因此 整个 过 程 就 是 与 正则 “斗智 斗 勇 ” 的 过 程 。 
当然 也 可 以 不 用 正则 ， 但 不 用 正则 ， 使 用 函数 方式 
实现 parser， 代 码 量 太 多 了 ，angular 与 ractive 束 是 被 





parser 抑 累 。 并 且 随 着 EsmaScript 一 年 升 一 次 级 的 步 
伐 ， 每 年 都 加 入 新 的 语法 ，parser 是 越 来 越 复杂 ， 
你 总 有 遗漏 的 风险 。 因 此 不 建议 实现 一 个 完整 的 
parser. We xt A CUBS BRAY Be Be ET HH A A Et 
4 J 


BERRIRA, EMRE ER A ARAR 
Fit #3 RAER 。 


变量 抽取 是 为 动态 依赖 收集 服务 。 
路 径 抽 取 古 为 静态 依赖 收集 服务 。 


动态 依赖 收集 ， 要 对 求 值 函数 进行 深 改造 。 要 
执行 一 下 求 值 函数 ， 让 里 面前 端的 赋值 语句 被 执 
行 ， 从 而 触发 访问 器 属性 的 getter 方 法 。 因 此 它 有 一 
个 人 硬性 要 求 ，vm 必 须 是 一 个 特殊 的 对 象 。 这 个 对 
象 的 所 有 属性 或 大 部 分 属性 要 转换 为 访问 器 属性 ， 
或 者 像 knockout 将 属性 变 成 一 个 方法 。 像 angular 那 





样 ， 如 果 vm 是 一 个 普通 对 象 ， 不 存在 访问 莫 属 性 ， 
里 面前 置 赋值 语句 是 没有 音义 的 。 因 此 它 就 发 展 出 
另 一 种 技术 ， 路 由 抽取 ， 对 应 的 ， 它 能 监听 子 级 对 
象 的 属性 变动 。 


vm.$watch(path, callback) 


比如 说 ， 一 个 表达 式 是 这 样 的 。 


aaa.bbb+aaa.ccc 


那么 它 里 面 会 产生 两 个 $watch 回 调 。 














vm.$watch("aaa.bbb", callback) 
vm.$watch("aaa.ccc", callback) 





angular 如 何 知道 aaa.bbb、aaa.ccc 发 生 了 变化 
aaa 对 象 进行 diff， 肥 现 不 一 致 ， 残 触发 对 应 路 径 的 


回调 。 这 个 步骤 ，angular 称 之 为 脏 检 测 。 效 率 无 法 
与 经 典 的 MVVM 精 准 属 性 监控 相 比 。angular 也 答 试 
过 精准 属性 监控 ， 为 此 还 放弃 了 浏览 器 兼容 性 ， 特 
意 让 干 侈 Chrome 搞 了 一 个 Object.observe 的 新 API。 
但 其 他 浏览 器 不 跟 Chrome 玩 ， 最 后 也 不 了 了 之 。 


抽取 变量 与 抽取 路 径 步 骤 基 本 一 致 。 有 兴趣 可 
以 看 一 下 avalon1.5.8 的 实现 。avalon1.5 是 动态 依赖 
收集 与 静态 依赖 收集 都 用 上 。 





在 ractivejs 或 polymer 等 库 ， 路 径 抽取 还 存在 通 
配 符 的 情况 。 


vm.$watch("array.*.aaa", callback) 





eS it EIN SA To AEE ERIE BR CIN, 
动态 模板 比 静 态 模板 复杂 多 。 这 一 切 都 是 为 了 最 小 
化 刷新 。 





15.2.2 ”刷新 函数 
刷新 函数 是 内 置 的 视图 刷新 方法 。 有 多 少 种 指 
令 ， 就 有 多 少 种 方法 。 换 言 之 ， 这 一 节 主 要 介绍 通 


用 的 指令 类 型 。 





指令 通常 分 为 两 大 类 型 ， 逻 辑 指令 与 普通 指 











逻辑 指令 的 操作 对 象 是 元 素 广 点 ， 比 如 说 ms- 
if. ms-for (avalon2 系 ) 、ng-if、ng-repeat、ng- 
switch (angular 系 ) 、each、if、ifnot、 


with (knockout) 。 





wi ta SERRE oR Nae PE Cms-attr, 
ng-attr) 、 某 个 样式 〈ms-css, ng-css) 、 
nodeValue (ms-text, ng-text, 双 花 括号 ) ~ 
innerHTML (ms-html, ng-html) 、 某 种 事件 (ms- 
on-click, ng-on-click， 它 们 大 多 数 可 以 缩写 成 ms- 


click, ng-click) 。 在 ng2 时 代 起 ， 所 有 MVVM 框 架 
也 不 约 而 同 地 使 用 冒号 代 蔡 各 种 前 闹 ， 于 古 ms- 
attr、ng-attr 变 成 : attr。 


只 要 我 们 知道 了 绑 定 对 象 的 type 属 性 ， 残 一 下 


子 能 找到 对 象 的 刷新 函数 。 简 单 的 刷新 函数 ， 如 
text 指 令 的 可 以 写成 这 样 。 


function text(node, value, binding)t 
node.replaceData(0, value.length, value) 
//node 为 文本 节点 ， replaceData 可 以 参看 这 里 
//http://www.jb51.net/w3school/xmldom/dom_text.htm 


} 





或 者 写成 这 样 。 


function text (node, value, binding) { 
node.nodeValue = value 


} 





html 指 令 则 是 这 样 。 


function text (node, value, binding) { 
node.innerHTML = value 


O O 
或 者 使 用 jQuery。 


function text (node, value, binding) { 
$(node) .html(value) 
} 


像 attr、css 指 令 则 更 是 如 此 ， 它 们 内 部 存在 复 
杂 兼 容 性 处 理 ， 要 么 你 使 用 jQuery， 要 么 目 己 实现 
一 父 attr、css 方 法 。 因 此 angular1 内 部 存在 一 个 
jqLite 的 轻 量 库 。 这 时 你 可 以 把 之 前 章节 《属性 模 
块 ， 样 式 模块 ， 事 件 模 块 ) 学 到 的 东西 氢 过 来 。 


这 些 还 是 比较 简单 的 指令 ， 刷 新 函数 还 是 很 好 
实现 ， 像 过 、for 指 令 融 肪 烦 了 。 





it 指令 要 求 表达 式 的 值 为 芮 的 时， 演 染 原 元 
A; 为 假 时 ， 将 原 元 系 移 出 DOM 树 ， 原 位 置 用 一 
个 注释 市 点 占 位 ， 再 次 为 真 的 ， 将 原 元 素 放 回 去 











(avalon, knockout) 或 是 重新 生成 一 个 元 系 放 回去 


Cangular) 。 








for 指 令 则 会 生成 更 多 占 位 用 的 注释 节操 ， 有 的 
框架 称 之 为 路 标 系统 ， 有 的 框架 称 之 为 销 反 系统 


(0) 


angular 的 ng-repeat 指 令 ， 注 意 每 一 项 中 间 也 人 存 
在 注释 市 点 隅 开 。 


<li class="animate-repeat" ng-repeat="friend in friends | filt 
er:q as results"> 
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} ye 


ars old. 
</li> 





<!—— ngRepeat: friend in friends | filter:q as results 一 > 
<li class="animate-repeat ng-binding ng-scope" ng-repeat="friend in frie 
results"> 
[1] John who is 25 years old. 
</li> 
<! 一 end ngRepeat: friend in friends | filter:q as results --> 
<li class="animate-repeat ng-binding ng-scope" ng-repeat="friend in frie 
results"> 
[2] Johanna who is 28 years old. 
</li> 
<!—— end ngRepeat: friend in friends | filter:q as results --> 
<li class="animate-repeat ng-binding ng-scope" ng-repeat="friend in frie 
results''> 
[3] Mary who is 28 years old. 
</li> 
<! 一 end ngRepeat: friend in friends | filter:q as results --> 
<li class="animate-repeat ng-binding ng-scope" ng-repeat="friend in frie 
results"> 
[4] Erika who is 27 years old, 
</li> 
<! 一 end ngRepeat: friend in friends | filter:q as results --> 


avalon2 的 ms-repeat 指 令 。 


<ol> 
<li ms-for='($key, $val) in @object'>{{$key}}::{{$val}}</1li 


> 
</ol> 





<ol> = $0 
<!—ms-for: ($key, $val) in @object-—> 
<li>a::11</li> 
<!—fo0r054689433025--> 
<li>b: :22</li> 
<!—f0r054689433025--> 
<li>c::33</li> 
<!—-for054689433025--—> 
<li>d: :44</ li> 
<!——for054689433025--> 
<li>e::55</li> 
<!—for054689433025--> 
<!—-ms-for-end:--> 

</ol> 


有 的 MVVM 框 架 ， 不 使 用 注释 市 点 作为 销 点 ， 





XGA A Ro TR RULE Ais E N) ah A I HES PE 
RAPI ERSE mi AE E eM BT fort 
环 里 面 ， 肯 定 要 通过 nodeValue 或 其 他 什么 来 区 
分 。 比 如 angular， 它 们 都 是 end 加 上 用 户 的 指令 属 
性 值 ，avalon 则 是 使 用 同一 个 UUID (for\d+ ) 。 
Fa VU HE WE A EHA, HELE. BAT 
点 只 是 一 个 假象 ， 让 那些 喜欢 在 控制 台 观 察 的 人 ， 
学 得 这 个 框架 不 会 产生 这 么 多 乱 七 八 槽 的 注释 节 
点 ， 肯 定性 能 更 优 了 。 但 生成 一 个 空白 市 a 
一 个 注释 节点 ， 对 浏览 器 而 言 都 需 

这 么 多 重 原型 继承 。 空 白 节点 ， 你 还 ome 
添加 一 个 特殊 的 属性 ， 属性 值 为 ms_for 或 ng_for 的 必 
性 值 ， 来 区 分 循环 。 




















var anchor = document.createTextNode('') 
anchor.xxx = '($key, $val) in @object' 








fEIE6~IE8 F, MAT ABER T AEA BES 





加 自 定 义 属 性 ， 这 就 是 avalon 不 采用 此 方案 的 缘 
故 。 


其 实 使 用 注释 节点 有 一 个 好 处 ， 我 们 可 以 直接 
使 用 原生 方法 得 到 所 有 销 上 后。 


var queryComments = DOC.createTreewalker ? function(parent) 


{ 
var tw = DOC.createTreewalker(parent, NodeFilter.SHOW_C 
OMMENT, null, null), 
comment, ret = [] 
while (comment = tw.nextNode()) { 
ret.push(comment ) 
} 
return ret 
: function(parent) { 
return parent.getElementsByTagName("!") 





getComments = function(parent, array) { 
var nodes = parent.childNodes 
for (var i= 0, el; el = nodes[it+]; ) { 
if (el.nodeType === 8) { 
array.push(el) 
} else if (el.nodeType === 1) { 
getComments(el, array) 
} 
} 


queryComments = function(parent) { 
var ret = [] 

getComments(parent, ret) 

return ret 





在 ember.js 中 ， 则 干脆 使 用 script 节 点 做 销 点 。 


有 了 销 点 系统 ， 当 你 的 数组 由 a、b、c 变 成 c、 
b、a 时 《这 时 通常 会 介入 一 个 非常 复杂 的 diff 算 
法 ， 如 最 短 编 辑 距 算 算 法 ， 计 算出 最 少 移动 的 步 
骤 ， 有 具体 可 以 看 一 下 knockout 源 码 。 像 react， 则 强 
制 要 求 你 给 一 个 不 重复 的 key， 这 时 通过 hash 得 到 移 
动 位 置 。 像 avalon1、avalon2 它 们 的 实现 也 是 各 显 
神通 的 ) ， 这 些 由 销 点 分 开 的 元 素 束 会 抽出 DOM 
树 ， 变 成 一 个 文档 雄 厂 ， 插 入 到 目标 位 置 的 销 点 的 
前 面 。 








有 关 for 指 令 的 实现 可 以 参看 这 两 个 链接 。 


https://github.com/RubyLouvre/avalon/issues/372 
https://github.com/RubyLouvre/avalon/blob/2.1.6/src/directives/ 
for.js 





接着 下 来 说 事件 指令 与 duplex 指 令 。 


Bal 


SMa A MAI, BORK (EPA BUR ek El 
同一 个 函数 ， 当 然 你 也 可 以 是 不 同 的 函数 实例 ， 但 


要 你 标识 它 与 之 前 的 是 否 一 致 。 


Bal 





function old(){ 
return aa + 1 


function neo(){ 


return aa + 1 





AFETA 2, AR == SR EE 
没有 意义 的 ， 但 你 又 不 能 再 绑 一 次 。 这 时 只 能 比较 
表达 式 。 如 采 生 成 它们 的 表达 式 一 致 ， 那 么 只 需 绑 
一 次 。 这 时 另 一 个 问题 来 了 了， 怎么 知道 这 个 函数 已 
ARRE? 于 是 我 们 还 是 将 前 几 章 的 基于 UUID 
的 事件 系统 搬 上 来 。 此 事件 系统 会 访问 函数 上 面 有 
没有 uuid 必 性， 没有 就 会 加 一 个 。 因 此 我 们 可 以 抢 
先 把 binding.expr 放 到 上 和 面 去 ， 这 样 束 实现 绑 定 一 次 
事件 的 效果 。 











而 duplex 指 令 ， 它 也 是 这 样 ， 不 同 的 是 ， 它 可 
以 绑 定 多 个 事件 ， 尤 其 要 兼容 IE6 一 IE8 的 情况 下 。 
此 外 ，duplex 是 双 工 指令 ， 顾 名 思 义 ， 它 是 会 有 反 过 
回 操作 VM， 因 此 它 不 但 有 get 方 法 ， 还 有 set 方 法 。 
在 avalon 中 ， 它 实现 对 元 系 的 value 属 性 动 持 ， 当 元 
素 的 value 不 是 在 事件 回调 中 被 修改 的 情况 下 ， 也 能 
通知 框架 更 新 VM。 


图 15-6 和 图 15-7 是 angular 与 avalon 的 指令 设计 
Al. 


Application Temlate Operation 


e ng-app 


-CSp ng-change 
e ng-controller 


e-disabled ng-checked 
-hide | show ng-click 
ie: if ng-href 
ng-mouse ng-selected 
ng-repeat 
ng-switch 
ng-transclude 


Binding 


ng-bind 
ng-model 
ng-init 
ng-sre 
ng-style 


MRK 





图 15-7 


15.3 ViewModel 





MVVM 的 核心 在 于 ViewModel， 根 据 其 是 否 主 
动 进行 监控 ， 叉 分 为 两 大 派系 。avalon 这 样 通过 挖 
掘 语言 特性 打造 的 重量 对 象 VM， 或 是 像 angular 那 
样 依靠 外 部 的 difft 机 制 检 测 自 身 变 化 的 轻 量 对 象 
VM. 





从 对 象 继承 的 原型 链 长 度 及 占用 内 存 来 划分 ， 
JavaScript 分 为 4 种 对 象 。 
超 轻 量 Object.create(nulll) 没有 原型 


Re 只 有 一 重 原型 的 普通 对 象 {} 
= 只 有 一 到 二 重 原型 ， 或 带 有 访问 器 属性 的 对 象 ，avalon 或 vue 的 VM 对 象 


























超重 量 存在 5 级 原型 的 对 象 ， 各 种 DOM 节 点 或 window 对 象 








但 作为 avalon 式 的 VM 必须 用 访问 器 属性 构 
成 。 


在 第 4 草 《 类 工厂 》 中 ， 我 们 介绍 了 如 何 使 用 


Object.defineProperty žy — 7 Res — ANY Il 48 
性 ， 其 实在 更 早期 的 时 候 ，Firefox 残 添加 了 
__lookupSetter__. __lookupGetter__. __ 
defineSetter__. __defineGetter__ 4 NHK. Bi 
2 个 合成 现在 的 Object.getOwnPropertyDescriptory 方 
法 ， 后 4 个 合成 现在 的 Object.defineProperty 方 法 。 
这 也 成 了 旧 的 W3C 浏 览 右 实现 avalon 式 VM 的 解决 
之 道 。 





在 旧 的 正中 怎么 办 ? 虽然 Object.defineProperty 
是 在 IE8 提 出 来 的 ， 但 它 不 能 应 用 于 普通 对 象 ， 只 
能 用 于 元 素 节 点 上 。 基 于 前 人 做 了 许多 探索 ， 有 如 
Ts 











(1) 用 元 系 节 点 代 蔡 普通 对 象 ， 
dom.onpropertychange 事件 可 以 侦 听 setter， 而 且 没 
有 getter， 没 有 getter 束 无 法 进行 动态 依赖 收集 。 不 
过 现在 发 展 出 静态 依赖 收集 ， 这 也 没什么 了 ， 但 最 


SUEY ERM] is BET FP RY Je HE A ETT BR], EL 
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重 原型 链 ， 每 重 都 占用 大 量 属性 名 与 方法 名 ， 中 炎 
概率 比 六 合 彩 高 多 了 ， 因 此 此 方案 早早 出 局 。 























(2) 用 预 编 译 手段 ， 将 项 目的 源码 中 
obj[member] = val 答 换 成 比如 superSsetter (obj, 
member, val) , var a = obj[member] 符 换 成 var 
a = superGetter(obj, member). (HA AKA 


KAP, KAAS. 


(3) 使 用 VBScript， 它 拥有 3 种 类 似 的 语句 
Set、Get、Let， 可 以 实现 相同 的 功能 ， 坑 主要 有 3 
1. VBScript 对 象 一 旦 生成 ， 就 不 能 再 添加 新 成 
4， 人 否则 束 抛 错 。 由 于 VM 不 单 使 用 方法 器 属性 ， 
要 做 其 他 大 量 处 理 ， 添 加 与 删除 一 个 成 本 太 高 。 
本 上 都 要 求 先 定义 后 使 用 ， 这 个 缺憾 可 以 水 受 。 
2. 属性 名 不 区 分 大 小 写 ， 这 个 需要 注意 一 下 束 


> 





ball 








ÍT. 3. 会 占用 少量 的 属性 名 ， 目 前 发 现 这 3 
个 : err, type, me. 4. 函数 的 this 不 再 指 问 对 
象 ， 这 个 可 以 使 用 bind 方 法 搞定 。 





下 面 是 dojo 实 现 的 版 本 。 


http://download.dojotoolkit.org/release-1.9.7/dojo-release- 
1.9.7/dojox/lang/observable.js.uncompressed.js 








而 Avalon 实现 的 版 本 是 目前 最 实用 的 ， 大 量 
应 用 于 生产 环境 。 


(4) 使 用 flash，flash 的 语言 特征 一 直 是 
JavaScript 抄 榴 对 象 ， 早 些 年 的 ECMA4 就 是 忠诚 拥 
人 症 。 尺 管 falsh 在 PC 上 基本 都 安 北 了 ， 但 不 怕 一 万 ， 
最 怕 万 一 。 目 前 也 没有 看 到 有 人 使 用 此 方案 。 








Object 类 位 于 动作 脚本 类 层次 结构 的 根 处 。 此 
类 包含 JavaScript Object 类 所 提供 功能 的 一 小 部 分 ， 


如 图 15-8 所 示 。 





Object 类 位 于 动作 姥 本 类 层次 结构 的 根 处 。 此 类 包含 JavaScript Object 类 所 提供 功能 的 一 小 部 分 。 


Object 类 的 方法 摘要 

说 明 

在 对 象 上 创建 getter/setter Mit. 

将 影片 剪辑 元 件 与 动作 脚本 对 象 类 相关 联 。 

将 指定 对 象 转换 为 字符 串 然 后 返回 它 。 

删除 Object .watch () 创建 的 监视 点 。 

返回 对 象 的 原始 值 。 

注册 当 动作 脚本 对 象 的 指定 属性 更 改 时 要 调用 的 事件 处 理 函 数 。 











图 15-8 





说 完 这 些 赤 惨 的 兼容 方案 ， 我 们 看 一 下 有 没有 
新 的 API 可 以 用 吧 。Object.defineProperty 只 对 取 值 
赋值 操作 敏感 ， 如 采 我 们 为 元 了 系 添加 一 个 新 属性 
呢 ， 删 除 一 个 属性 呢 ， 它 吏 无 能 为 力 。 于 是 叉 是 
Firefox 为 我 们 市 来 一 些 好 玩 的 魔术 。 





15.3.1 Proxy 


文 是 ES6 的 新 东西 ， 完 全 不 是 同一 个 次 元 的 动 
H, WEISER Aruby#ER EA). ZH, Aes a 
J 7S ALEL” HY Object.observe, —AYEA RE R 
Hal. BREN as NEI, RS AF, M 


Chrome36~Chrome49.. iii [=|Proxy, X — MER 
的 东西 ， 不 像 Object.defineProperty， 只 是 对 = 号 人 敏 

感 。 什 么 delete、for in、in、new， 还 是 方法 调用 都 
能 感应 到 ! 这 是 一 个 非常 项 级 的 自省 机 制 ， 要 求 浏 
览 吉 对 普通 对 象 内 部 添加 大 量 的 钩子 。JS 之 父 所 在 
的 Firefox 很 早 就 搞 出 这 东西 ， 那 些 还 是 规范 1， 后 

来 标准 化 后 ， 接 口 有 点 不 一 样 。Chrome 也 是 规范 

1， 规 范 2 都 实现 过 ， 不 过 中 途 断 线 了 几 个 版 本 。 





Proxy 古 一 个 构造 函数 ， 使 用 new Proxy 创 建 代 
理 器 ， 和 个 对 象 ， 第 二 个 参数 也 为 一 
DMR, BEIREAR MERE BATE ASE ASA 


get 和 set 写 一 个 demo。 





var obj = new Proxy({}, { 
get : function( target , prop ) { 
console .log(prop，' 进 行 取 值 ' ); 
return target[prop]; 


set : function( target, prop, value) { 
console.log(prop, value, target[prop], ' 打 印 新 旧 值 ' ) ， 
target[prop] = value; 





/ 
obj.aaa = 1; 


obj.aaa; 
obj . bbb 
obj . bbb 


2 
3 





aaa 1 undefined 打印 新 旧 值 
aaa 进行 取 值 
bbb 2 undefined 打印 新 旧 值 


bbb 3 2 打印 新 旧 值 


如 末了 要 监听 属性 被 删除 ， 可 以 在 第 二 个 对 象 添 
加 一 个 deleteProperty 方 法 。 它 会 将 原 对 象 与 要 删除 
的 属性 传 给 你 ， 实 际 上 和 什么 也 没有 做 ， 你 需要 
己 进行 删除 。 





var obj = new Proxy({}, { 
get: function (target, prop) { 
console.log(prop, 'HETHUH', target[prop]); 
return target[prop]; 


ty 

deleteProperty: function (target, prop) { 
console.log(prop, ' 被 删除 了 ) 
delete target[prop] 
return true // 如 果 决 定 删除 则 返回 true 





ty 

set: function (target, prop, value) { 
console.log(prop, value, target[prop], ' 打 印 新 旧 值 ) 
target[prop] = value; 





}); 

obj.aaa = 1; 
obj.aaa; 
delete obj.aaa 
obj.aaa 











此 外 还 有 其 他 接口 ， 但 基本 上 与 VM 无 关 了 。 


handler 


handler. 
handler. 
handler. 
handler. 
handler. 
handler. 
handler. 


handler. 
handler. 
handler. 
handler. 
handler. 


作为 介绍 ， 也 一 并 列 出 来 吧 。 


.getPrototypeof ( ) 


setPrototypeOf ( ) 
isExtensible() 
preventExtensions() 
getOwnPropertyDescriptor() 
defineProperty( ) 
has() 

get() 

set() 
deleteProperty( ) 
ownkeys() 

apply() 

construct() 





大 家 可 以 访问 以 下 网 页 了 解 其 更 多 用 法 。 


http://www.cnblogs.com/diligenceday/p/5467634.html 
https://developer .mozilla.org/en-US/docs/Web/JavaScript/Referen 
ce/Global_Objects/Proxy 





15.3.2 Reflect 


mS 


在 angular2 的 内 部 下 是 使 用 Reflect 实 现 VM。 人 有 它 
的 行为 与 Proxy 很 相似 ， 可 以 说 Proxy 的 第 二 个 参数 


对 象 有 什么 方法 ， 它 就 有 什么 方法 。 
Reflect 对 象 的 设计 目的 有 如 下 4 个 。 


(1) 将 object 对 象 的 一 些 明 显 属于 语言 内 部 
的 方法 〈 比 如 Object.defineProperty) 放 到 Reflect 
对 象 上 。 现 阶段 ， 某 些 方法 同时 在 Object 和 Reflect 
对 象 上 部 闭 ， 未 来 的 新 方法 将 只 部 闭 在 Reflect 对 象 
ler 








(2) 修改 某 些 object 方法 的 返回 结果 ， 让 其 
变 得 更 合理 。 比 如 ，Object.defineProperty(obj， 
name, desc) 在 无 法 定义 属性 时 ， 会 抛 出 一 个 错误 ， 
而 Reflect.defineProperty(obj, name, desc) 则 会 返回 


false。 











Object.defineProperty(target, property, attributes); 
//uccess 

} catch (e) { 
//failure 


} 





// 新 写法 
if (Reflect.defineProperty(target, property, attributes)){ 
// success 
} else { 
// failure 


} 





(3) 让 Object 操作 都 变 成 函数 行为 。 东 些 
Object 操作 是 命令 式 ， 比 如 name in obj 和 delete 
obj[name], if} Reflect.has(obj, name) 和 
Reflect.deleteProperty(obj, name) 让 它们 变 成 了 函数 








// 方 法 调用 

Math.floor(1.75) 

Reflect.apply(Math.floor, undefined, [1.75]); 
// 添 加 操 必 

var obj = {}; 

obj.x = 7 

Reflect.defineProperty(obj, "y", {value: 7}); 





// 删 除 属性 
var obj = { x: 1, y: 2 }; 

delete obj.x //true 
Reflect.deleteProperty(obj, "7"); // true 

obj; // {} 

// 读 取 属 性 

var obj = { x: 1, y: 2 }; 

obj.x // 1 

Reflect.get(obj, "x"); // 1 

// 实 例 化 

var obj = new Foo(1, 2); 

var obj = Reflect.construct(Foo, [1, 2]); 

var d = new Date(1776, 6, 4) 

var d = Reflect.construct(Date, [1776, 6, 4]); 


—= 











// 获 取 其 所 有 键 名 
Object.getOwnPropertyNames({z: 3, y: 2, x: 1}) 
Reflect.ownKeys({z: 3, y: 2, x: 1}); /7 [ "z", "y", "x" | 








(4) Reflect 对 象 的 方法 与 Proxy 对 象 的 方法 一 
一 对 应 ， 只 要 是 Proxy 对 象 的 方法 ， 残 能 在 Reflect 对 
象 上 找到 对 应 的 方法 。 这 了 束 让 Proxy 对 象 可 以 方便 
地 调用 对 应 的 Reflect 方 法 ， 完 成 默认 行为 ， 作 为 修 
改行 为 的 基础 。 也 惑 是 说 ， 不 管 Proxy 怎 么 修改 默 
认 行 为 ， 你 总 可 以 在 Reflect 上 获取 默认 行为 。 


Reflect 对 象 的 方法 清单 如 下 ， 共 14 个 。 


apply(target, thisArg, args) 
construct(target, args) 
get(target, name, receiver ) 
set(target, name, value, receiver ) 
defineProperty(target, name, desc) 
deleteProperty(target, name) 
has(target, name) 

ownKeys (target) 


enumerate(target) 

isExtensible(target) 
preventExtensions(target) 
getOwnPropertyDescriptor(target, name) 
getPrototype0f (target) 
setPrototypeOf(target, prototype) 





更 多 用 法 可 以 看 这 里 。 


http://www.cnblogs.com/diligenceday/p/5474126. html 


15.3.3 avalonH) ViewModelixit 


不 是 有 了 Object.defineProperty 在 Proxy 或 Reflect 
中 ， 放 进 一 个 对 象 束 new 出 一 个 ViewModel 出 来 。 
只 能 说 ， 它 们 是 必要 条 件 。 我 们 需要 将 要 监听 的 属 
性 变 成 访问 占 属 性 ， 所 有 访问 器 属性 都 是 共用 同一 
套 setter、getter 方 法 。getter 里 面 做 依赖 收集 (不 是 
必须 的 ) ，setter 里 做 视图 刷新 或 触 友 该 属性 的 
$watch 回 调 。 在 此 之 前 ， 我 们 需要 完成 一 套 观 察 者 
模式 ， 残 是 github 中 利 见 的 EventEmitter 库 。 





但 这 些 库 的 订阅 数组 都 是 放 函 数 。 如 果 我 们 要 
放 绑 定 对 象 ， 需 要 改造 一 下 ， 并 且 改 成 $watch， 
$fire 接口 。 


var EventBus = { 


$watch: function (type, callback) { 
var binding = callback 


if (typeof callback === "function") { 
binding = { 
expr: type, 


update: callback 
} 
} 


var bus = this.$events 

var list = bus[type] 

if (!list) { 
list = bus[type] = [] 

} 

function unwatch() { 
avalon.Array.remove(list, binding) 
if(!list.length) { 

delete bus[type] 

} 

} 

list.push(binding) 

return unwatch 

F: 
$fire: function (type, value) { 

var list = this.$events[type] 

if (list && lsit.length) { 
for (var i = 0, obj; obj = list[i++];) { 

obj .update() 

} 








然后 我 们 再 为 它 添加 一 个 $id， 用 于 标记 这 个 








VM 和 是 作用 于 页 面 茶 个 元 隶 上 的 。 





var vm = avalon.define({ 
$id: "test", 
aaa: 1, 


bbb: 2 
3 


<div ms-controller="test">{{@aaa}}</div> 





我 们 看 avalon.define 的 一 个 简单 实现 。 





avalon.define = function(obj) { 
var vm = {} 
var other = {} 
for (var name in obj) { 


if (typeof obj[name] !== 'function' && name.charAt(0) ! 
三 三 '$') { 


(function (key, value) { 
function get(){ 
// 在 avalon1.4,1.5 中 这 里 会 进行 动态 依赖 收集 ， 详 见 这 里 
//https://github.com/RubyLouvre/avalon/blob/1.5/src/10%20depend 
ency.js 





return get._value 
} 
get._value = value 
Object.defineProperty(obj, key, { 
set: function (newValue) { 
if(newValue !== get. value) { 
get._value = newValue 
if(vm.$hashcode) 
vm. $fire(key, newValue) 


} 
return newValue 
ty 
get: get 
}) 
})(name, obj[name] ) 


selse{ 
other[name] = obj[name] 
} 


} 
for(var name in other){ 
vm[ name] = other 


vm.$events = {} 

vm.$hashcode = new Date - Math.random() 
vm.$fire = EventBus.$fire 

vm.$watch = EventBus.$watch 


return avalon.vmodels[vm.$id] = vm 





此 外 ， 你 可 以 添加 更 多 以 $ 开头 的 属性 方法 ， 
来 增强 它 的 功能 。 在 avalon、angular 等 库 
头 的 属性 方法 都 是 框架 自用 的 。avalon2 的 一 ae 





VM sei, T FE AN BY a a 


v start: Observer 
> Saccessors: Object 
$element: null 
> Sevents: Object 
> $fire: function (expr, a, b) 
$hashcode: "$495412453029" 
$id: "start" 
$model: (...) 5 
> get $model: function () 访问 器 属性 $model 
> set $model: function () 
$render: 0 
$track: "name" 
> swatch: function () 
> hasOwnProperty: function hasOwnKey (key) 
name: (...) 3 
> get name: function get() 访问 器 属性 name 
> set name: function (val) 
>  proto__: Object 


那么 如 何 将 绑 定 属性 放 进 vm.$events.aaa 数 组 中 
呢 ? 这 束 要 靠 扫 摘 机 制 ， 从 上 到 下 扫描 。 





avalon.scan = function (el, vm) { 
scanNodes([el], vm) 


function scanNodes(array, vm) { 
for (var i= 0, el; el = array[it++]; ) { 
switch (el.nodeType) { 
case 1: 
scanTag(el, vm) 
break 
case 3: 
scanText(el, vm) 
break 


function scanTag(el, vm){ 
var id = el.getAttribute('ms-controller' ) 
if(id && avalon.vmodels[id]){ 
var vm2 = avalon.vmodels[id |] 
if(vm && vm2 && vm == vm2){ 
vm = mergeVM(vm, vm2) 
telse{ 
vm = vm2 
} 


el.removeAttribute('ms-controller') 


var bindings = scanAttrs(el,vm) 
for(var i = 0, b; b = bindings[i++]; ){ 
vm. $watch(b.expr, b) // 重 点 


} 
if(el.children && el.children.length) { 
scanNodes(el.children, vm) 
} 
} 
function scanText(){ 
// 用 正则 检测 是 否 有 花 括 号 
// 有 则 转换 为 绑 定 对 象 
// 并 进行 vm. Swatch 











i 


function scanAttrs(){ 


// 遍 历 el,attributes 中 所 有 对 象 ,看 name 是 否 以 ms -开头 
} 




















图 15-9 里 面 用 到 一 个 mergeVM 方 法 ， 其 实 很 简 
单 ， 束 是 将 两 个 VM 合 并 成 一 个 新 的 VM。 使 用 
Object.getOwnPropertyDescriptor 或 者 更 新 的 
Object.getOwnPropertyDescriptors, Wi fet # ATA VI 


aE OTA, AGM. MRE HEN ht 
aes RATE DORE UT H a ee PEE! — SMI $accessorsX} 
RE. 







mergeVM? 


判定 节点 的 类 型 


图 15-9 


现在 我 们 这 个 VM 有 是 很 简单 的 ， 它 只 文 持 一 重 
属性 。 如 果 属 性 的 属性 也 是 对 象 呢 ? 这 个 我 们 需要 
将 这 define 方 法 递归 一 下 不 就 行 了 吗 ! 对 于 数组 的 
监控 ， 业 界 流行 的 方法 是 重 写 数 组 的 大 部 分 方法 ， 
然后 再 加 上 一 些 移 除 数组 的 方法 。 


至 此 ，avalon 内 部 各 种 概念 的 关系 图 ， 如 图 15- 
10 所 示 。 






Sevents 





VM 的 属性 变化 或 某 一 级 属性 
变化 ， 形 成 expr 













到 事件 总 结对 象 
找到 对 应 订阅 数 
组 ， 逐 个 执行 其 
Wil ar PRI BC 


指令 上 有 类 型 






节点 上 面 有 指令 






绑 定 对 象 









通过 $watch 方 
法 加 放 进 VM 的 


表达 式 转换 为 
求 值 函数 


图 15-10 


15.3.4 _ angular 的 ViewModel 设 计 


angular 的 ViewModelj 有 一 个 专门 的 官方 术语 叫 
$scope ， 它 只 是 一 个 普通 构造 磊 (Scope) 的 实 
例 。 换 言 之 ， 它 是 一 个 普通 的 JS 对 象 。 为 了 实现 


MVVM 框 染 通 党 宣传 的 那 种 “改变 数据 即 改变 视 
图 ”的 魔 么 效果 ， 它 得 并 备 上 更 多 更 强大 的 外 挂 。 











<div ng-app="myApp" ng-controller="myCtrl"> 


: <input type="text" ng-model="firstName"><br> 
: <input type="text" ng-model="lastName"><br> 
br> 

生 名 : {{firstName + " " + lastName}} 





</div> 


<script> 

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 

}); 


</script> 








XK 


app.controller 会 产生 一 个 $scope 对 象 ， 
个 $scope 是 传 进去 的 。 


var $scope = new Scope(); 
$scope.firstName = 'Jane'; 
$scope.lastName = 'Smith'; 





KA XT F avalon} PTA VM jin F He i BI) 


avalon.vmodels 中 ，angular 则 倾 癌 将 $scope 对 象 以 
树 的 形式 组 织 起 来 。 


function Scope() { 
this.$id = nextUid(); 
this.$$phase = this.$parent = this.$$watchers = 
this.$$nextSibling = this.$$prevSibling = 
this.$$childHead = this.$$childTail = null 


this.$root = this; 


this.$$destroyed false; 


this.$$listeners = {}; 
this.$$listenerCount = {}; 
this.$$watchersCount = 0; 
this.$$isolateBindings = null; 





其 中 $parent . $$nextSibling 
~ $$prevSibling ~ $$childHead ~ $$childTail 
. $root 是 指 问 其 他 $scope 对 象 。$$watchers 72 4h 
定 对 象 的 订阅 数组 ，$$watcherscount 是 其 长 
E, $$listeners 是 放手 动 触 发 的 函 
WW, $$listenerCount 是 其 长 度 。 


由 于 angular 是 一 个 普通 的 JS 对 象 ， 当 属性 发 生 





变化 时 ， 它 本 里 不 可 能 像 avalon 那 么 灵敏 地 跑 去 
$fire 。 于 是 它 实现 了 一 套 复 林 的 $fire 方法 ， 但 
它 不 叫 $fire ， 由 做 $digest 。 


换言之 ，avalon 的 $watch 对 应 angular 的 $watch 
， 此 外 ， 它 还 有 $watchGroup , $watch Collection 
。avalon 的 $fire 方 法 对 应 angular 的 $digest 。 为 了 安 
人 它 外 面 还 有 $appLyAsync 、$apply 
、$evalAsync 等 几 个 过 函数 。 它 们 共同 构成 angular 
的 监控 系统 。$watch 和 $digest 是 相辅相成 的 ， 两 
者 一 起 ， 构 成 了 angular 作 用 域 的 核心 功能 ， 数 据 变 
化 的 啊 应 。 





先 看 $watch 方法 ， 传 参 比 avalon 复 杂 多 ， 但 结 
果 都 是 返回 一 个 移 除 监听 的 函数 。 





Scope.prototype.$watch: function(watchExp, listener, objectEqua 
lity, prettyPrintExpression) { 
// 将 表达 式 转换 为 求 值 函数 


var get = $parse(watchExp); 


if (get.$$watchDelegate) { 


return get.$$watchDelegate(this, listener, objectEquality 
, get, watchExp); 


var scope = this, 
// 所 有 绑 定 对 象 都 放 在 一 个 数组 中 ， 因 此 存在 性 能 问题 
array = scope.$$watchers, 
// 构 建 绑 定 对 象 
watcher = { 
fn: 1istener,// 刷 新 函数 
last: initwatchvVal,// 旧 值 
get: get,// 求 值 函 数 
exp: prettyPrintExpression || watchExp,// 表 达 式 
eq: !!objectEquality// 比较 方法 
}; 


lastDirtywatch = null; 

















if (!isFunction(listener)) { 
watcher.fn = noop; 


} 


if (!array) { 

array = scope.$$watchers = []; 
} 
array.unshift(watcher ); 
incrementWatchersCount(this, 1); 


return function deregisterwatch() {// 移 除 绑 定 对 象 
if (arrayRemove(array, watcher) >= 0) { 
incrementWatchersCount(scope, -1); 





} 
lastDirtyWatch = null; 
}; 
Si 





而 $digest 则 复杂 多 了 ， 我 们 先 实 现 一 个 它 的 人 简 
化 版 ， 融 历 其 所 有 绑 定 对 象 ， 执 行 其 刷新 函数 。 


Scope.prototype.$digest = function() { 
var list = this.$$watchers || [] 
list.forEach(function(watch) { 

var newValue = watch.get() 
var oldValue = watch.last; 
if (newValue !== oldValue) { 
watch. fn(newValue, oldValue, self); 


watch.last = newValue; 


}) 








AERTAL, CWE- avalonit]—t, 182 
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性 ， 导 致 了 B 属 性 也 发 生变 化 ， 那 么 avalon 也 连忙 
更 新 B 涉 及 的 视图 。 而 angular 的 $$watcher 里 面 都 
古 一 个 个 普通 对 象 ， 假 如 里 面 有 A、B 两 个 对 象 。 
先 执 行 A，A 值 没有 变化 ， 再 执行 B，B 变 化 了 ， 但 
B 在 变化 的 同时 ， 也 修改 了 A 值 。 但 这 时 ， 循 环 已 
经 完毕 。B 涉 及 有 的 视图 变动 ，A 没 有 变动 ， 这 就 不 
合理 了 。 因 此 ， 我 们 需要 在 某 个 绑 定 对 象 发 生 了 一 
次 改动 后 ， 再 重新 检测 这 个 数组 。 








我 们 把 现在 的 $digest 函数 改名 


As$digestonce, EWA WET R, jk 
回 一 个 布尔 值 ， 表 示 是 否 变更 了 。 


Scope.prototype.$$digestOnce = function() { 
var self = this; 
var dirty; 
_.forEach(this.$$watchers, function(watch) { 
var newValue = watch.get(); 
var oldValue = watch.last; 
if (newValue !== oldValue) { 
watch. fn(newValue, oldValue, self); 
dirty = true; 
} 
watch.last = newValue; 
}); 
return dirty; 


}; 








然后 ， 我 们 重新 定义 $digest ， 它 作为 一 个 “外 
层 循环 ”来 运行 ， 当 有 变更 发 生 的 时 候 ， 调 
用 $$digestonce 。 








Scope.prototype.$digest = function() { 
var dirty; 
do { 
dirty = this.$$digestOnce(); 


} while (dirty); 


1 





$digest WIERD RPT AIST KS. W 
果 第 一 次 运行 完 ， 有 监控 值 发 生变 更 了 ， 标 记 为 
dirty， 所 有 监听 器 再 运行 第 二 次 。 这 会 一 直 运 行 ， 
直到 所 有 监控 的 值 都 不 再 变化 ， 整 个 局 面 稳定 下 来 
了。 





但 这 里 面 有 一 个 风险 ， 比 如 A 的 求 值 函 数 里 会 
修改 B，B 的 求 值 函数 又 修改 A， 那 么 大 家 都 无 法 稳 
定 下 来 ， 不 断 死 循环 。 因 此 我 们 得 把 digest 的 运行 
控制 在 一 个 可 接受 的 迭代 数量 内。 如 条 这 么 多 次 之 
后 ， 作 用 域 还 在 变更 ， 就 勇敢 放手 ， 宣 布 它 永远 不 
会 稳定 。 在 这 个 点 上 ， 我 们 会 抛 出 一 个 卉 币 ， 因 为 
不 管 作用 域 的 状态 变 成 怎样 ， 它 都 不 太 可 能 是 用 户 


想 要 的 结 末 。 














从 代 的 最 大 值 称 为 TTL (short for Time To 
Live) ， 这 个 值 默认 是 10， 可 能 有 点 小 《我 们 刚 运 
行 了 这 个 digest 成 干 上 万 次 ) ， 但 是 记 住 这 是 一 个 


性 能 敏感 的 地 方 ， 因 为 digest 经 常 被 执行 ， 而 且 每 
个 digest 运 行 了 所 有 的 监听 筑 。 


Scope.prototype.$digest = function() { 
var ttl = 10; 
var dirty; 
do { 
dirty = this.$$digestOnce(); 
if (dirty && !(ttl--)) { 


throw "10 digest iterations reached"; 


} 
} while (dirty); 


了 





但 这 只 是 模拟 了 angular 的 $digest 的 冰山 一 
角 ， 可 见 没 有 访问 髓 属性 这 高 阶 魔法 ， 想 实现 
MVVM 是 非常 麻烦 与 复杂 ， 并 且 用 户 使 用 起 来 也 别 
H- 


H Ksdigest 的 源码 与 解决 可 见 这 里 。 


https://github.com/angular/angular.js/blob/v1.5.8/src/ng/rootSc 
ope.js 
http: //www.cnblogs.com/xuezhi/p/4897831.htm1 





我 们 再 看 $digest 是 怎么 与 angular 的 ng-model X 
联 在 一 起 。 


ng-model 指 令 有 一 个 $post 方法 ， 它 在 里 面 进 
行 绑 定 事件 ， 如 果 用 户 提供 了 updateOn 这 个 选项 ， 
选项 是 一 些 事件 名 ， 那 么 它 就 为 元 素 绑 定 对 应 的 事 
IF TURR Ebu. 








post: function ngModelPostLink(scope, element, attr, ctrls) { 
var modelCtrl = ctrls[0]; 
if (modelCtrl.$options.getOption('updateOn')) { 
element .on(modelCtrl.$options.getOption('updateOn'), functi 
on(ev) { 
modelCtr1.$$debounceViewValueCommit(ev && ev.type); 
+); 
} 


function setTouched() { 
modelCtrl.$setTouched(); 

} 

element.on('blur', function() { 
if (modelCtrl.$touched) return; 


if ($rootScope.$$phase) { 
scope.$evalAsync(setTouched); 
} else { 
scope. $apply(setTouched) ; 


}); 





我 们 先 看 blur 的 回调 ， 里 面 $evalAsync 
与 $apply 方法 ， 它 们 里 面 就 会 调用 $digest ， 进 行 
脏 检 测 ， 如 图 15-11 所 示 。 


/ Native JavaScript 
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$evalAsync: function(expr, locals) { 
if (!$rootScope.$$phase && !asyncQueue.length) { 
$browser.defer(function() { 
if (asyncQueue.length) { 
$rootScope.$digest(); 


tr 
$apply: function(expr) { 
try { 
beginPhase('S$apply'); 
各 


} finally { 
try { 
$rootScope.$digest(); 
} catch (e) { 
$exceptionHandler(e); 
throw e; 





HÆ $$debounceViewValueCommit 方法 ， 里 面 
也 有 一 个 $apply 方法。 换言之， 殊途同归 ， 全 部 会 
在 $digest 里 面 处 理 。 





但 如 条 许 多 地 方 同时 及 生 改变 ， 会 不 会 将 它 捅 
See? 不 会 ， 我 们 留意 一 下 $digest 的 源码 最 上 方 
有 一 句 beginPhase('$digest')， 临 结束 时 也 有 一 
人 句 clearPhase() 。$apply 里 面 也 








jz beginPhase('$apply') 与 clearPhase() ， 它 们 标 


WX MS$scopert KETAR M, ERT 


function beginPhase(phase) { 
if ($rootScope.$$phase) { 
throw $rootScopeMinErr('inprog', '{0} already in progres 
s', $rootScope.$$phase); 
} 


$rootScope.$$phase = phase; 


} 


function clearPhase() { 
$rootScope.$$phase = null; 





但 $apply 2 4ffitecatchtt, ALLE RNR 
继续 运行 。 这 惑 是 官方 推荐 我 们 使 用 $app1ly 驱动 程 
序 运 行 ， 而 不 直接 用 $digest 的 缘故 。 





通过 上 面 的 分 析 ，avalon 与 angular 的 设计 重点 
是 不 同 的 ，avalon 是 忙于 友 掘 语言 特征 ， 通 过 访问 
万 中 的 setter 与 getter 将 其 简单 的 观察 者 模式 放 进 
去 。angular 则 忙于 构建 其 复杂 无 比 的 观察 者 模式 
(本 市 没有 展现 其 全 貌 ， 它 除了 $$watchers 队列 ， 
还 有 asyncQueue 队列 、postDigestQueue 队 





列 、applyAsyncQueue 队列 ) ， 并 且 为 了 diff 新 旧 
值 的 不 同 ， 发 展 出 一 套 名 叫 脏 检测 的 机 制 。 


15.4 React 与 虚拟 DOM 


React 与 angular 儿 乎 同时 出 现在 人 们 眼帘， 但 
React 的 发 迹 却 晚 多 了 ， 直 到 React Native 发 布 了 ， 
才 一 炮 而 红 。 解 决 问题 的 痛 点 才 是 框架 被 采纳 的 关 
键 。 虽 然 angular 也 有 自己 的 移动 解决 方案 Ionic， 但 
hybrid app 在 体积 、 性 能 等 方面 无 法 与 原生 app 相 提 
并 论 ， 但 原生 app 对 人 员 要 求 非常 高 ，IOS 招 聘 市 场 
一 直 水 涨 船 高 ， 供 不 应 求 。React Native 的 Write 
once, run anywhere， 一 下 子 打开 了 局 面 。 











在 笔者 眼中 ， 开 发 者 世界 的 一 大 塌 阴 是 社 群 依 
据 语言 《甚至 是 生态 系统 ) 进行 划分 。JavaScript、 
Java、Objective-C、Python 以 及 C++ 等 ， 实 际 上 ， 
这 导致 了 资源 的 巨大 浪费 ， 因 为 针对 每 个 生态 系 
统 ， 都 要 开发 类 似 的 一 套 工 具 ， 诸 如 包 管 理 器 、 
IDE, ORUE IRET. 





举 个 具体 的 例子 吧 ， 在 Facebook 中 ， 每 个 功能 
我 们 都 必须 实现 3 次 : Web 版 、iOS 版 以 及 Android 
We. BREE ce, FS em EEE FI PY 
握 这 些 生 态 系 统 ， 我 们 通常 需要 3 个 人 来 实现 一 个 
Tie, WAAR. 








为 了 解决 该 问题 ， 笔 者 首先 想到 的 是 ， 我 们 需 
要 一 种 单一 的 语言 或 生态 系统 。 有 了 React Native， 
我 们 更 趋向 于 JavaScript 语言 ， 但 从 宏观 的 角度 
看 ， 哪 一 种 语言 并 不 重要 。 重 要 的 是 ， 只 保留 一 种 


inn Facebook, Christopher Chedeau” . 











回 过 头 来 ，React 之 所 以 不 受众 ， 也 有 其 原 
因 ， 它 做 了 许多 大 胆 的 创新 。 你 可 以 创新 一 两 处 ， 
但 改变 太 多 ， 就 让 人 无 法 接受 。React 让 人 最 大 的 垢 
病 是 JSX。 





var Table = React.createClass({ 
render: function () { 
return ( 
<table><tbody> 
{this.props.data.map(function(row) { 


return ( 
<tr> 
{row.map(function(cell) { 
return <td>{cell}</td>; 


})} 
</tr>); 


})} 
</tbody></table> 





PRAY Wie cE RI. (BE MBF GWA 
辑 混 杂 在 一 起 ， 经 过 jQuery 无 入 侵 风 漳 洗 礼 的 人 ， 
无 法 直接 用 这 么 丑陋 的 代码。 如 果 它 是 改 成 这 样 ， 
大 家 或 许 会 好 受 些 。 





var Table = React.createClass({ 
render: function () { 
// 将 模板 独立 出 去 


return require("text!template.html") 





但 当时 webpack 还 不 流行 ， 前 后 打包 方案 只 有 
browserify、grunt、glup， 因 此 还 是 行 不 通 。 


facebook 还 是 给 出 男 一 套 方 案 ， 可 以 改 成 这 
样 。 


var Table = React.createClass({ 
render: function () { 
return ( 
React.DOM.table(null, React.DOM.tbody(null, 
this.props.data.map(function (row) { 
return ( 
React.DOM.tr(null, 


row.map(function (cell) { 
return React.DOM.td(null, cell); 
}))); 
})))); 





但 是 这 样 太 茶 拙 了 ， 人 们 还 是 不 接受 。 


时 至 今天 ， 人 们 已 经 习惯 了 用 JSX 来 开发 
APP， 回 过 来 想 束 党 得 没什么 大 不 了 。 毕 葛 开 发 效 
率 要 紧 ， 赚 钱 要 紧 。 





JSX 只 是 表现 ， 是 一 个 模板 ， 一 个 语法 糖 。 它 
最 终 还 是 翻译 成 React.DOM.xxx 堆 起 来 的 结构 体 。 
它们 有 一 个 威风 的 名 字 叫 虚拟 DOM 。 像 虚拟 机 ， 





它 不 让 你 再 装 一 台电 脑 ， 就 可 以 让 你 有 一 台电 脑 跑 
两 个 或 3 个 或 10 多 个 操作 系统 。 虚 拟 DOM 也 可 以 让 
你 在 不 操作 DOM 的 情况 下 ， 让 你 模拟 页 面 在 数据 
发 生变 动 后 的 大 致 情形 。 虚 拟 DOM 是 用 于 预测 末 
来 的 。 然 后 干什么 昵 ? diff! 像 git、svn 那 样 比较 前 
后 两 个 版 本 的 不 同 点 。 虚 拟 DOM 虽 然 与 真实 DOM 
还 是 相差 十 万 八 千里 ， 如 表 15-1 所 示 。 











表 15-1 


a EA 所 








这 是 一 个 A 标签 的 虚拟 DOM 结 构 。 








var a= { 
type: 'a', 
props: { 


children: 'React', 

ClassName: 'link', 

href: 'facebook/react + GitHub' 
ty 


_isReactElement: true 


} 


React.render(a, document .body) 





图 15-12 是 一 个 A 标 签 的 真实 DOM 结 构 。 


<a href="/users/ ¥ a.comment-user 

1011527/jay- accessKey: "" 

blanchard" title= assignedSlot: null 

"25,232 reputation” > attributes: NamedNodeMap 

class="comment— baseURI: "http: //stackoverf low. com/quest ions/31349765/react-js-and-php-together' 
Uses Jay charset: "" 


Slanchard</S= se $e childElementCount: 0 


> <spa z | 4.32 tao < ry ~- 
tbody #comment-50682742 td ra > at 


Console 
Y top v Preserve log 


var names = [];for(var i in $0){names.push(i)} console. log(names, names. length) 


E 


747 





["target", "download", "ping", “rel", "hreflang", "type", “referrerPolicy", “text", "coords", “charset", "name", “rev", "shape", 
"href", “origin", "protocol", "username", "password", “host", “hostname”, "port", "pathname", "search", "hash", "toString", "title" 
"lang", “translate", “dir", "dataset", "hidden", “tabIndex", “accessKey", "draggable", “spellcheck”, "contentEditable", 
“isContentEditable", “offsetParent", "offsetTop", “offsetLeft", “offsetWidth", “offsetHeight", “style", “innerText", “outerText", 
“webkitdropzone", “onabort", “onblur", “oncancel", “oncanplay", “oncanplaythrough", "onchange", “onclick", “onclose", 
“oncontextmenu", “oncuechange", “ondblclick", “ondrag", “ondragend", “ondragenter", “ondragleave", “ondragover", “ondragstart", 
“ondrop", “ondurationchange", “onemptied", “onended", “onerror", “onfocus", “oninput", “oninvalid", “onkeydown", “onkeypress", 
“onkeyup", “onload", “onloadeddata", “onloadedmetadata", “onloadstart", “onmousedown", “onmouseenter", “onmouseleave", 
"onmousemove", "onmouseout", “onmouseover”, “onmouseup", “onmousewheel", “onpause", “onplay", “onplaying", “onprogress", 
“onratechange", “onreset", “onresize", “onscroll", “onseeked", “onseeking", “onselect", “onshow", “onstalled", “onsubmit"..] 
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图 15-12 


属性 有 230 多 个 ，A 标 签 还 是 比较 简单 的 那 种 ， 
表单 元 素 input 则 上 升 到 260 多 个 。 此 外 元 素 节 点 有 7 
重 原型 链 


Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") 


undefined 

Object.getOwnPropertyDescriptor(HTMLInputElement, "value") 
undefined 

Object. getOwnPropertyDescriptor(HTMLElement, “value") 
undefined 

Object. getOwnPropertyDescriptor(HTMLElement.prototype, "value") 
undefined 

Object.getOwnPropertyDescriptor(Element, "value") 

undefined 
Object.getOwnPropertyDescriptor(Element.prototype, "value") 
undefined 

Object.getOwnPropertyDescriptor(Node.prototype, "value") 
undefined 

Object.getOwnPropertyDescriptor(Node, "value") 

undefined 


这 些 信息 ， 对 于 我 们 比较 两 个 DOM 是 否 一 
致 ， 是 没有 意义 的 。 因 此 虚拟 DOM 融 是 这 么 几 个 
属性 ， 但 它 已 经 携带 了 足够 多 的 信息 ， 让 它 可 以 描 
述 一 个 像 它 这 样 的 DOM 是 长 成 怎么 样 的 。 


又 如 文本 市 点， 在 虚拟 DOM 中 ， 它 就 直接 是 
一 个 字符 串 或 数字 。 因 为 对 于 文本 节点 而 言 ， 框 架 
只 需要 知道 hodeValue 就 能 创建 对 应 的 真实 DOM 
document.createTextNode(node Value) 。 可 
见 JSX 为 了 减轻 虚拟 DOM 树 的 内 存 负 担 是 做 了 认真 
的 思考 。 到 后 来 ， 为 了 防止 每 次 都 找 近 历 DOM 树 














查找 对 应 的 真实 DOM， 它 还 直接 将 DOM 放 到 虚拟 
DOM 上 ， 大 家 可 以 通过 getDOMNode 方 法 获取 。 


此 外 ， 虚 拟 DOM 不 只 是 描述 P、DIV、FORM 
这 些 真实 存在 的 html 标 签 ， 它 还 能 描述 自 定义 标 
签 。 $F URES HOARE CEE html 肯 定 
是 小 写 ， 并 且 框 架 内 部 有 一 个 哈 希 表 ， 将 所 有 html 
标签 都 宫 括 其 中 。 自 定义 标签 则 是 大 写字 母 开 头 ， 
它 在 定义 时 没有 children 方 法 ， 而 是 提供 了 一 个 
render 方 法 。render 里 面 必 须 返 回 一 个 根 节 点 ， 它 可 
以 是 其 他 自 定义 标签 或 普通 html 标 签 。 这 带 来 的 好 
处 是 ， 所 有 标签 都 是 组 件 ， 以 组 件 的 形式 来 写 代 
fy 

















好 了 ， 既 然 我 们 知道 一 个 DOM 长 得 怎么 样 ， 
又 知道 它 的 虚拟 DOM 在 数据 变化 后 长 得 怎么 样 ， 
那么 facebook 就 集中 精力 改进 diff 算 法 ， 算 出 如 何以 
最 小 的 步骤 刷新 视图 。 





15.4.1 React} diff 


传统 的 MVVM 是 通过 访问 器 属性 精确 得 到 要 修 
改 的 节点 ， 而 React 每 次 更 新 则 从 组 件 的 根 节点 开始 
diff 与 更 新 。 按 理 来 说 ，React 的 更 新 性 能 不 如 传统 
的 MVVMI 阿 ， 并 且 diff 算 法 也 不 是 首创 ， 大 家 都 明 
日 这 是 怎么 一 回 事 。 计 算 一 标 树 形 结 构 转 换 成 男 一 
棵 树 形 结构 的 最 少 操 作 ， 基 本 上 算法 书 都 已 经 写 明 
的 算法 复杂 度 OM), FP n 是 树 中 节点 的 总 数 。 








O(n? ) 到 底 有 多 可 怕 ， 这 意味 着 如 果 要 展示 
1000 个 节 氮 ， 藉 要 依次 执行 上 十 亿 次 的 比较 。 这 种 
生 数 型 的 性 能 消耗 对 于 前 端 演 染 场景 来 说 代价 太 高 
T! 现今 的 CPU 每 秒 钟 能 执行 大 约 30 亿 条 指令 ， 
即便 是 最 局 效 的 实现 ， 也 不 可 能 在 一 秒 内 计算 出 锚 


异 情况 。 














因此 ， 如 果 React 只 是 单纯 的 引入 dift 算 法 而 没 
有 任何 的 优化 改进 ， 那 么 其 效率 是 远 远 无 法 满足 前 


= 


端 泻 染 所 要 求 的 性 能 。 通 过 下 面 的 demo 可 以 清晰 的 
描述 传统 diff 算 法 的 实现 过 程 。 


// 循环 过 历 
for (let i = 0; i < count; i++) { 

const beforeTag = beforeLeaf.children[i]; 

const afterTag = afterLeaf.children[i]; 

// 添加 afterTag 节点 

if (beforeTag === undefined) { 
result.push({type: "add", element: afterTag}); 

// 删除 beforeTag 节点 

} else if (afterTag === void 0) { 
result.push({type: "remove", element: beforeTag}); 

// 节点 名 改变 时 ， 删 除 beforeTag “kt, WIM afterTag 节点 

} else if (beforeTag.tagName !== afterTag.tagName) { 
result.push({type: "remove", element: beforeTag}); 
result.push({type: "add", element: afterTag}); 

// 节点 不 变 而 内 容 改变 时 ， 改 变节 点 

} else if (beforeTag.innerHTML !== afterTag.innerHTML) 
if (beforeTag.children.length === 0) { 





result.push({ 
type: "changed", 
beforeElement: beforeTag, 
afterElement: afterTag, 
html: afterTag.innerHTML 


}); 
} else { 


// 递归 比较 
diffLeafs(beforeTag, afterTag); 
} 
} 
} 


return result; 


i 





此 为 了 提高 dif 速 度 ，facebook 必 须 做 一 些 大 


胆 的 创新 ， 将 O(n? ) 复杂 度 的 问题 转换 成 O(n) 复 


杂 度 的 问题 。 
diff 策 略 


。 页 面 中 将 一 个 节点 挪 到 另 一 个 父 届 点 底下 的 移 
动 操作 特别 少 ， 因 此 可 以 忽略 。 

两 个 相同 组 件 产生 类 似 的 DOM 树 结构 ， 不 同 的 
组 件 产生 不 同 的 DOM 树 结构 。 

对 于 同一 层次 的 一 组 子 节点 ， 它 们 可 以 通过 唯 
一 的 id 进 行 区 分 。 














基于 以 上 3 个 前 提 宽 略 ，React 分 别 对 tree diff. 
component diff L} element diff 进 行 算 法 优化 ， 事 实 
也 证 明 这 3 个 前 提 宽 略 是 合理 且 准 确 的 ， 它 保证 了 
整体 界面 构建 的 性 能 。 





e tree diff. 


e component diff. 


e element diff. 


扩展 阅读 如 下 。 


http://zhuanlan.zhihu.com/p/20346379 


15.4.2 ”React 的 多 端 演 染 


既然 我 们 可 以 用 DOM 来 呈现 虚拟 DOM 的 外 
观 ， 我 们 也 可 以 使 用 其 他 介质 来 呈现 它 。 在 2013 
年 ， 束 有 一 个 叫 Famo.us 的 框架 ， 以 canvas 展 现 了 其 
高 性 能 。 那 时 Web App 一 直 苦 于 性 能 ， 尽 量 少 用 
DOM， 好 了 ， 现 在 body 之 内 全 部 是 用 canvas 绘 制 
W, Efem EET. RARA AH H React 
canvas, Facebook's JESJA R, WAZA IP RK 


React Native. 








因为 有 了 虚拟 DOM 这 一 层 ， 所 以 通过 配备 不 
同 的 泻 染 器 ， 束 可 以 将 虚拟 DOM 的 内 容 泻 染 到 不 


同 的 平台 。 而 应 用 开发 者 ， 使 用 JavaScript 就 可 以 通 
吧 各 个 平台 了 ， 如 图 15-13 所 示 。 


WW - 和 sy J 


Ags msmania committed wii 


mart Merge pi 
w dom 

@ native 

@ noop 

@ shared 


i testing 


图 15-13 
React15 JU I SVG E JEZ., 


artze “SS TE & A agra A Node style 
CommonJS 模 块 。 在 它 的 基础 上 ，Facebook 叉 开发 
了 react-art， 封 痛 art， 使 之 可 以 被 react.js 所 使 用 ， 即 
实现 了 前 端的 svg 库 。 然 而 ， 考 虑 到 react.js 的 JSX 语 
法 ， 已 经 文 持 将 &lt;cirle&gt) &lt;svg&gt; 等 svg 


标签 直接 搬入 到 DOM 中 (4 SR ERY 1 H a tS 
react-art 库 了 ) ， 此 外 还 有 HTML canvas 的 存在 ， 
此 ， 在 前 端 上 ，react-art 并 非 不 可 蔡 代 。 


15.5 ”性 能 声 与 复杂 场 





由 于 MVVM 的 便捷 性 ， 让 前 端 更 容易 堆砌 庞大 
的 应 用 ， 于 是 它们 比 以 往 更 加 频繁 地 遇 到 这 两 个 问 


o 


PERE. MRAMVVMR K — ANER RE 
个 充满 访问 器 属性 的 重型 对 象 。 如 果 一 个 属性 是 一 
个 对 象 ， 那 么 它 也 会 转换 为 一 个 VM 重 型 对 象 。 如 
果 一 个 属性 是 一 个 数组 ， 需 要 转换 为 监控 数组 ， 即 
写 其 所 有 方法 。 对 于 监控 数组 的 转换 ， 现 在 也 可 
LIH proto _ 赋予 一 个 新 对 象 束 行 了 。 








var ap = Array.prototype 
var observeArray = {} 
Object.getOwnPropertyNames(ap).forEach(function (name) { 


observeArray[name] = ap[name] 


}) 


observeArray.remove = function (el) { 
var index = this.indexOf(el) 
if (index !== -1) { 
this.splice(index, 1) 
return true 


} 
return false 


var arri = [] 

// 实 现 数组 的 子 类 

arr1, proto = observeArray 
arri.push(11) 

console. log(arri1.remove(11))//true 
var arr2 = []// 这 是 普通 数组 





如 果 数 组 元 素 是 一 个 个 对 象 ， 那 么 它们 也 会 转 
换 为 YM。 这 是 一 个 很 大 的 性 能 消耗 。avalon?2 现 在 
唯 有 循环 利用 这 些小 YM。 这 估计 等 浏览 器 的 版 本 


上 去 了 ， 我 们 才 可 以 用 Proxy 代 符 
Object.defineProperty 来 实现 VM。 





在 解决 工程 复杂 增 的 问题 上 上， 业界 现 在 倾 问 使 
oleae 这 个 下 一 章 专 门 介绍 。 但 如 何 优 
雅 地 定义 组 件 ， 这 节 可 以 介绍 一 下 。 现 在 流行 两 种 
方法 ， 已 经 挂 掉 的 web component 方 式 与 新 兴 的 JSX 





web component 束 是 目 定 义 标 签 ， 可 以 说 是 一 
堆 指 令 集 合 ， 外 加 生命 周期 管理 。 此 外 web 


componenti 3K J slot (Fit) 的 新 概念 ， 解 决 大 段 
文本 或 元 素 片 段 的 传递 问题 。 比 如 我 们 创建 一 个 弹 
出 层 组 件 ， 弹 出 层 中 间 的 内 容 是 怎么 传 进 的 呢 ? 
slot 束 很 好 解决 这 问题 


下 和 面 是 弹出 层 的 模板 ， 里 面 有 许多 slot 元 素 ， 
EINER RRE MIT 


<div class="modal-mask" ms-visible="@isShow" ms-effect="{is:'m 
odal'}"> 
<div class="modal-box"> 
<div class="modal-header"> 
<h3>{{@title}}</h3> 
<i class="icon-collapse-alt icon-large modal-close" 
ms -click="@cbProxy(false)"></1i> 
</div> 
<div class="modal-body"> 
<slot name="content"></slot> 
</div> 
<div class="modal-footer"> 
<button class="btn" ms-click="@cbProxy(false)"> 消 
</button> 


<button class="btn btn-primary" ms-click="@cbProxy ( 
true)"> 确 定 </button> 
</div> 
</div> 
</div> 























这 是 使 用 方式 。 


<ms-modal :config="@config"> 
<p> 弹 窗 的 内 容 </p> 
<p> 弹 窗 的 内 容 </p> 
<p> 弹 窗 的 内 容 结束 !</p> 
</ms-modal> 











当 各 种 日 定义 标签 组 疙 起 我 们 的 页 面 时 ， 
hee, Ee. CERES. 
BAH — IR E AIE H T a S EAE E PIR 
HPI o 





<ms -module> 
<ms-chat from="Paul, Addy"> 
<ms-discussion> 
<ms-message from="Paul" profile="profile.png" profile="11 
8075919496626375791" datetime="2013-07-17T12:02"> 
<p>Feelin' this Web Components thing.</p> 
<p>Heard of it?</p> 


</ms-message> 
</ms-discussion> 
</ms-chat> 
<ms-chat>...</ms-chat> 
</ms-module> 





但 是 ， 正 6 一 正 8 中 是 无 法 识别 这 样 的 标签 ， 不 
过 IE 支 持 用 标准 浏览 器 也 支 
持 带 冒号 的 标签 ， 那 么 束 将 所 有 横 杠 改 成 冒号 。 这 











时 间 题 又 来 了 ， 在 Chrome、Firefox、IE11, IE11 的 
IE6 羔 容 模 式 分 别 如 图 15-14、 图 15-15、 图 15-16、 
图 15-17 所 示 。 


Œ | DB localhost:8383/avalon/scope-tag.html 


88888 {{a}} 


Q a Elements Network Sources Timeline Profiles Resources Audits | Console {| NetB: 
© Y <topframe> v Preserve log 


AA:DIV 
<aa:div id="aaa"> 
<aa: span>88888</aa: span> 
<aa:uu><span>{{a}}</span> 
</aa:uu></aa:div> 


图 15-14 


E 3 C D localhost:8383/avalon/scope-tag.html 
88888 {{a}} 


Q [] Elements Network Sources Timeline Profiles Resources Audits | Console NetB, 
© Y <topframe> v © Preserve log 
undefined 


AA:DIV 


<aa:div id="aaa"> 
<aa: span>88888</aa: span> 
<aa:uu><span>{{a}}</span> 
</aa:uu></aa:div> 


undefined 


88888 a} 


P Y < > OS | testers HM css Wa DoM Wi Cookies 


lè | 清除 保持 概 兄 || 全 部 | 错误 ”警告 ”消息 ”调试 信息 。 Cookies 


undefined s 
AA:DIV á 
<aa:div id="aaa”> s 


~aa:span>88888</ea-span> 
<aa:uu><span> { {a} } </span> 
</aa:uu></aa:div> 


undefined s 


图 15-15 


88888 {{a}} 


2 F < > = |as | HTML css BA DOM 网 络 Cookies 


lo | 清除 Gs Orn || 全 部 | ek SS BE BES 
undefined 
AA:DIV 


<aa:div id="aaa”> 
(aa: span>8B888</ea:span> 
<aa:uu><span> { {a} } </span> 
</aazuu></aa:div> 


undefined 


图 15-16 


[a | os” |) [9 [A 
À 附加 页 针对 的 是 文档 模式 5。 部 分 控制 台 API 和 功能 可 能 无 法 使 用 。 


AIi © epee! eget ae 
AA: DIV 

<AA:DIV id=aaa> 
AA: SPAN 

<AA: SPAN> 
undefined 

/AA: SPAN 

</AA: SPAN> 
undefined 

AA: UU 

<AA: UU /> 

SPAN 


图 15-17 


Cookies 


我 们 会 发 现 IE6 下 实际 是 多 出 许多 标签 ， 


ra 





把 闭 标签 也 变 成 一 个 独立 的 元 素 节 点 ， 如 图 15-18 
所 示 。 


w 
4 <body onload="null”> 
<aa:div id="aaa"></aa:div> 
<aa:span></aa:span> 
88888 
</aa:span><//aa:span> 


88> UU></aa>uuU> 


<span>{{a}}</span> 
</aa:div><//aa:div> 
</body> 


图 15-18 


缘故 是 它 不 能 直接 使 用 ， 需 要 单独 开 一 个 命名 
空间 。 


if (document.namespaces) { 
var htmlNs = 'http://www.w3.org/1999/xhtml' 
document .namespaces.add('aa',htm1Ns) 


} 





由 于 这 兼容 性 问题 ， 现 在 业界 都 倾 回 将 模板 放 
在 Script 与 textarea 等 容器 元 素 里 面 。 使 用 一 些 手 
段 ， 让 浏览 右 不 解析 里 面 的 文本 。 这 时 标签 名 束 可 


直接 用 横 杠 ， 或 像 JSX 那 样 以 大 小 写 区 分 普通 标签 
与 目 定 义 标签 。 为 了 将 里 面 的 标签 分 解 出 来 ， 这 时 
残 需要 一 个 改造 过 的 特殊 html parser。 有 关 html- 
parser 可 以 搜 一 下 github、avalon2、angular2、 
ractive.js 都 内 置 了 html-parser。 








笔者 收藏 了 一 个 迷你 的 html-parser， 大 家 可 以 
参 知 一 下 


https://github.com/lemonde/cms-htmlparser/blob/master/htmlparse 
r.js 


html-parserfe LE RA T KIHE SS it A HY DOM HY HK 
赖 ， 直 接 产生 一 堆 虚 拟 DOM， 然 后 这 些 虚拟 DOM 
也 能 转换 为 一 个 泻 染 函数 ， 放 在 后 端 输 入 一 个 完整 
的 页 面 ， 解 决 SEO 问 题 。 





有 了 虚拟 DOM，MVVM 的 流程 就 变 成 如 图 15- 
19 所 示 。 


MVVM 的 层级 也 变 成 这 样 ， 最 后 是 VM， 接 受 
外 界 的 添加 删除 修改 ， 中 间 是 虚拟 DOM， 作 为 组 
存 层 ， 预 测 新 的 DOM 绪 构 与 算出 最 小 的 修改 DOM 
的 步骤 ， 最 内 层 的 DOM API 与 所 有 要 处 理 的 
DOM。 这 其 实 与 我 们 一 贯 的 软件 架构 解决 方案 一 
样 ， 当 我 们 搞 不 定 某 个 技术 难点 ， 束 会 进行 分 治 ， 
再 介入 一 层 ， 专 门 进行 它 进行 攻坚 。 我 们 今天 讨论 
争论 的 MVC、MVP、MVVM 等 都 源 自 于 职能 分 化 
和 规划 的 思想 与 目的 ， 如 图 15-20 所 示 。 








EREA ~~ ~~ 
取 outerHTML 虚拟 DOM 全 N 






新 旧 虚 拟 
DOM diff 


成 为 旧 的 虚拟 DOM 


直送 麻油 要 中 引 





ViewModel 





图 15-20 


参考 资料 如 下 。 


https://www.zhihu.com/question/31809713/ 
https://www.zhihu.com/question/29504639 
https://www. zhihu.com/question/42001493 
http://www.cnblogs.com/DebugLZQ/archive/2012/05/15/2501512.htm1 


http://www. jianshu.com/p/9a6845b26856 





16 ”组件 








组 件 是 视图 层 的 分 治 方 案 。 在 Web 开 友 中 ， 我 
们 所 做 的 一 切 是 解决 维护 成 本 与 代码 复 用 问题 。 
MVVM 解 决 了 通用 的 业务 逻辑 开 友 与 维护 问题 ， 而 
组 件 ， 在 上 章 也 指出 了 ， 它 是 复数 个 指令 的 集合 由 


加 上 生命 周期 。 


16.1 jQuery RHEA R 


jQuery 时 代 ， 如 果 代 码 组 织 良 好 ， 也 是 MVC 相 
分 离 的 。M 束 是 插件 的 默 入 配置 对 象 与 用 户 的 传 参 
对 象 ，V 束 是 用 数组 形式 连结 起 来 的 html 字 符 串 ， 
jQuery 对 象 允 当 控制 器 CC。 





由 于 jQuery 的 API 太 强大 了 ， 动 态 创 建 一 个 市 
点 并 且 改 造 它 ， 将 它 挪 到 茶 一 处 都 是 轻而易举 的 
事 ， 因 此 jQuery 的 组 件 没 有 统一 的 套路 ， 唯 一 相同 
点 是 它 都 在 在 jQuery.fn 下 进行 扩展 。jQuery.fn 也 就 
是 jQuery.prototype， 定 义 了 一 个 jQuery.fn.dialog 方 
法 ， 然 后 使 用 时 ， 直 接 束 是 $(expr).dialog()， 是 纯 
命令 式 的 。 当 然 也 可 以 将 一 大 堆 字 人 符 串 变 成 一 个 弹 
出 层 的 样式 ， 然 后 插入 到 茶 元 又 展 下 ， 对 于 那个 时 
代 的 人 而 言 ， 它 也 是 组 件 。 











(function($) {// 这 个 东西 叫 IIFE 
// 扩 展 这 个 方法 到 jQuery 
$.fn.extend({ 





// 插 件 名 字 
pluginName: function() { 
/ / 388 A VUAC ICR SE 
return this.each(function() { 
// 在 这 里 编写 相应 代码 进行 处 理 
}); 



















































































注意 ， 不 是 所 有 在 jQuery.fn 中 扩展 的 方法 都 是 
一 个 组 件 。jQuery 作 者 的 本 意 是 让 大 家 在 上 面 扩展 
原型 方法 ， 写 们 一 般 和 被 谦虚 地 称 为 插件 。 插 件 与 组 
件 是 不 一 样 的 。 组 件 是 有 UI 界面 的 ， 插 件 则 没有 不 
一 定 。 或 者 说 ， 组 件 是 插件 的 一 种 特例 。 


一 些 优秀 的 UI 库 试图 对 其 辖 下 的 组 件 都 进行 规 
范 化 ， 并 做 了 一 些 创新 。 比 如 最 有 名 的 Bootstrap， 
市 来 一 项 很 实用 的 功能 ， 上 自动 初始 化 组 件 ! 只 要 用 
户 引 入 Bootstrap 的 JS 与 CSS 文 件 ， 然 后 HITML 以 官 
网 那样 组 织 结构 及 琴 加 类 名 ， 残 可 以 不 用 与 一 行 JS 
代码 让 弹出 层 、 轮 播 、 手 风 蕉 等 组 件 出 现在 你 的 页 
面 上 。 











Bootstrap 的 Dropdown 插件 的 主体 骨架 如 下 。 





//https://github.com/twitter/bootstrap/blob/master/js/bootstrap 


-dropdown.js 
!'function($) { 
"use strict"; // ECMA262v5 的 新 东西 ,3 





sr. 


























所 使 用 更 严谨 的 代码 编写 


HI 





这 三 三 二 三 三 三 三 三 三 三 三 主 三 三 三 三 宇 三 三 三 三 三 三 大 fH 
var toggle = '[data-toggle=dropdown]'; 
var Dropdown = function(element) { 
var $el = $(element).on('click.dropdown.data-api', this 
. toggle); 
$('html').on('click.dropdown.data-api', function() { 
$el.parent().removeClass('open'); 
}); 
}; 
Dropdown.prototype = { 
constructor: Dropdown, 
toggle: function(e) { 


LONG 
F 
keydown: function(e) { 
/* W */ 
} 
J; 
/* ERO 
meee ee m AE / 


var old = $.fn.dropdown; 
$.fn.dropdown = function(option) { 
return this.each(function() { 
var $this = $(this), 
data = $this.data('dropdown'); 
if (!data) 
$this.data('dropdown', (data = new Dropdown(thi 


s))); 





if (typeof option === 'string')// 调 用 它 的 实例 方法 
data[option].call($this); 
}); 
}; 


$.fn.dropdown.Constructor = Dropdown;// 暴 露 类 名 














/* 无 冲突 处 理 








入 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 2 
$.fn.dropdown.noConflict = function() { 
$.fn.dropdown = old; 
return this; 





























$( document ) 
.on('click.dropdown.data-api', clearMenus) 
.on('click.dropdown.data-api', '.dropdown form', fu 
nction(e) { 
e.stopPropagation(); 
}) 
.on('click.dropdown-menu', function(e) { 
e.stopPropagation(); 
}) 
.on('click.dropdown.data-api', toggle, Dropdown.pro 
totype.toggle) 
.on('keydown.dropdown.data-api', toggle + ', [role= 
menu]', 
Dropdown. prototype. keydown) ; 


} (window. jQuery); 











我 们 可 以 把 这 两 个 看 作 是 编写 jQuery 插件 的 最 


佳 实践 。 组 件 名 即 新 增 的 原型 函数 名 ， 内 部 类 使 
用 ， 默 认 参 数 ， 目 动 初始 化 给 件 。 








我 们 再 来 看 其 官方 UI 库 ，jQuery ui。 在 jQuery 
1.9 中 它 共 有 accordion、autocomplete、button、 


datepicker、dialog、menu、spinner、tabs、slider、 


tooltip 10 个 UI， 其 中 最 受 欢 迎 的 dateplcker 日 历 组 件 
还 没有 统一 化 ， 其 他 都 是 基于 $.Widget 构 建 。 


$.widget("ui.button", {//jquery.ui.button.js 
version: "@VERSION", 
defaultElement: "<button>"，// 使 用 什么 元 素 作 为 它 的 最 外 
options: { 
// 默 认 参 数 
ty 
_create: function() {// 生 命 周 期 钩子 
// 根 据 当 前 元 素 的 情况 重 置 一 些 参数 与 绑 定 事件 









































}, 
widget: function() {// 返 回 根 节点 
return this.buttonElement; 
}, 
_destroy: function() {// 生 命 周 期 钩子 
// 移 除 各 种 类 名 ， 属 性 与 事件 
}, 
_setOption: function(key, value) {// 如 果 人 处 理 


























Fr 
refresh: function() {// 生 命 周期 钩子 
Ws 





如 果 用 过 react 或 avalon 的 人 ， 束 会 感叹 六 七 年 
的 UI 库 已 经 考虑 到 根 节 点 、 生 命 周 期 、 数 据 对 象 等 
现在 定义 组 件 所 必需 的 要 系 。 由 于 jQuery 操作 风格 
命令 式 ， 它 不 会 独立 产生 一 个 组 件 实例 让 你 调用 它 
的 方 读 ， 那 你 能 过 重 载 一 个 方法 的 参数 实现 组 件 的 


SABE. Ait, jQuery ANRE RN wee ET 
雅 的 接口 ， 以 accordion 组 件 为 例 。 


初始 化 时 传 一 个 对 象 ， 方 便 设 置 N 个 配置 项 。 


$( ".selector" ).accordion({ heightStyle: "fill" ,{ active: 2 } 


}); 








初始 化 后 ， 第 一 个 参数 为 字符 串 “option” 时 妈 
进入 配置 模式 。 如 果 后 面 只 有 一 个 属性 或 方法 名 ， 
那么 就 是 读 方法 〈getter) 。 如 果 它 们 之 后 还 有 参 
数 ， 那 就 是 写 方法 (setter) ， 作 为 一 个 方法 的 参数 
或 这 个 属性 的 新 值 。 




















// getter 
var active = $( ".selector" ).accordion( "option", "active" ); 


// setter 
$( ".selector" ).accordion( "option", "active", 2 ); 








不 同 的 控件 会 有 不 同 的 方法 或 属性 ， 但 由 于 都 
是 同一 个 基 类 ， 因 此 会 有 如 下 相同 的 操作 。 





让 控件 不 可 用 。 它 有 以 下 两 种 操作 方式 。 


第 一 种 ， 使 用 配置 模式 。 


" selector" ).accordion( "option", "disabled", 





第 二 种 ， 直 接 传 入 “disable”。 


".selector" ).accordion( "disable" ); 





让 控件 可 用 ， 也 对 应 两 种 。 


第 一 种 ， 使 用 配置 模式 。 


".selector" ).accordion( "option", "disabled", false); 





第 二 种 ， 直 接 传 入 “enable”。 


" selector" ).accordion( "enable" ); 





销毁 控件 ， 可 传 入 “destroy”。 


$( ".selector" ).accordion( "destroy" ); 








如 果 想 得 此 UI 最 外 围 的 元 素 节 点 的 jQuery， 可 
传 入 “widget”。 


var widget = $( ".selector" ).accordion( "widget" ); 





至 于 实现 ， 修 改 配置 与 调用 方法 是 很 容易 的 ， 
它们 都 是 走 _setoptions 方法 ， 问 题 在 于 让 插件 是 
人 盏 可 用 。 一 般 地 ， 它 只 对 控件 的 类 名 下 手 ， 添 加 一 
个 叫做 ui-state-disabled 的 类 名 ， 并 将 
options.disable 改 为 false。 那 么 在 修改 配置 时 ， 吏 无 
法 进入 实际 操作 的 那个 分 文 。 由 于 控件 必然 绑 定 了 
许多 方法 ， 因 此 它 不 是 使 用 jQuery 的 on、bind、 
delegate 进 行 绑 定 ， 而 是 使 用 一 个 _on 的 方法 。 


$.Widget.prototype._on = function(suppressDisabledCheck, elemen 
t, handlers) { 








var delegateElement, 
instance = this; 
// 第 一 个 参数 决定 是 否 检测 disabled 状 态 
if (typeof suppressDisabledCheck !== "boolean") { 
handlers = element; 
element = suppressDisabledCheck; 
suppressDisabledCheck = false; 








} 


// 处 理 参数 多 态 化 , 可 能 用 户 不 会 传 这 么 多 参数 , 不 足 部 分 自己 设计 补 上 
if (!handlers) { 
handlers = element; 
element = this.element; 
delegateElement = this.widget(); 
} else { 
element = delegateElement = $(element); 
this.bindings = this.bindings.add(element ) ; 























} 
// 开 始 绑 定 

$.each(handlers, function(event, handler) { 

function handlerProxy() { 
// 这 里 的 分 支 最 关键 , 用 于 决定 用 户 的 操作 是 否 无 效 化 
if (!suppressDisabledCheck && 
(instance.options.disabled === true || 
$(this).hasClass("ui-state-disabled 








DTA 


return; 


} 


return (typeof handler === "string" ? instance[ han 
dler ] : handler) 
.apply(instance, arguments); 








} 
// 这 里 就 是 模拟 jQuery 核心 库 proxy 方 法 的 实现 , 加 个 UUID, 方便 移 除 
if (typeof handler !== "string") { 
handlerProxy.guid = handler.guid = 
handler.guid || handlerProxy.guid || $.guid 
++; 
} 


var match = event.match(/^(\w+)\s*(.*)$/), 
eventName = match[1] + instance.eventNamespace, 
selector = match[2]; 
if (selector) { 
delegateElement.delegate(selector, eventName, handl 


erProxy); 
} else { 
element.bind(eventName, handlerProxy); 





有 的 插件 的 disable 与 enable 可 能 非常 复杂 ， 需 
要 专门 设计 一 个 原型 方法 。 





jQuery 通过 字符 串 传 参 来 调用 原型 方法 的 设计 
非常 绝妙 ， 基 本 成 为 一 种 套路 。 


16.2 avalon2 的 组 件 方案 


从 现在 的 角度 来 看 ，jQuery 的 组 件 是 粗糙 的 ， 
首先 它 连 独立 性 的 问题 也 没有 和 解决。 组 件 只 是 
jQuery 某 个 方法 在 某 种 传 参 下 产生 的 现象 。 组 件 涉 
及 的 DOM 也 乱七八糟 地 灶 杂 业务 逻辑 中 ， 没 有 统 
一 定义 的 DOM， 也 残 没 有 统一 设计 的 样式 规划 。 
当然 ， 奢 干 年 后 ， 再 看 我 们 这 些 引 以 为 聚 的 组 件 ， 
或 许 也 不 过 尔 尔 ， 挑 出 一 大 堆 毛 病 。 用 工业 体系 的 
发 展 史 来 对 比 ，jQuery 组 件 就 像 芭 汽机 友 明 之 前 的 
早期 机 械 ， 如 《木兰 辞 》 里 面 的 机 标 ， 上 自动 化 程度 
非常 低 。 














avalon2 是 产生 于 现在 已 经 死去 的 Web 
Components 标 准 之 后 ， 此 时 CSS 己 经 大 规模 被 更 取 
符 。SASS 市 来 CSS 的 模块 化 与 组 件 化 。 有 时 候 ， 组 
件 不 一 定 需要 JavaScript， 有 一 堆 html 放 在 那里 ， 
CSS 让 和 它 呈 现成 一 个 弹出 层 ， 那 么 用 户 束 认为 它 是 





一 个 弹出 层 。SASS 因 为 了 有 了 变量 ， 有 函数 ， 
因此 实现 换 肤 功能 易如反掌 。 








再 看 Web Components 标 准 留 下 的 遗产 。 








(1) template 模板 元 素 ， 为 我 们 提供 了 一 个 
比 script 标 签 更 好 的 容器 元 聚 ， 并 且 它 也 是 一 个 更 好 
的 天 然 html parser。 在 过 去 ， 我 们 使 用 innerHTML 
来 做 html parser， 需 要 打 许 多 补丁 。 


(2) Shadow DOM 可 以 理解 为 一 份 有 独立 作 
用 域 的 html 片 段 。 这 些 html 片 段 的 css 环 境 和 主 文档 
隅 离 的 ， 各 自 保 持 内 部 的 独立 性 。 也 是 Shadow 
DOM 的 独特 性 ， 使 得 组 件 化 成 为 了 可 能 。 


(3) 上 自 定 义 标 签 ， 能 让 我 们 优雅 地 声明 一 个 
组 件 ， 这 个 组 件 拥 有 完整 的 生命 周期 钩子 ， 可 以 通 
过 它们 与 其 他 组 件 联 动 。 


(4) import 机 制 解 决 组 件 模板 的 加 载 问 题 。 


有 人 进一步 将 它们 抽象 成 设计 的 组 件 5 大 规 
范 ， 如 图 16-1 所 示 。 


互相 组 合 的 组 件 





图 16-1 


。 癌 内 聚 资源 一 一 组 件 资源 内 部 局 内 聚 ， 组 件 资 
源 由 目 身 加 载 控制 。 

。 独 立 作 用 域 一 一 内 部 结构 密封 ， 不 与 全 局 或 其 
他 组 件 产 生 影 啊 。 

。 日 定义 标签 一 一 定义 组 件 的 使 用 方式 。 

。 规 范 化 接口 一 一 组 件 接 口 有 统一 规范 ， 或 者 是 
生命 周期 的 管理 。 

。 可 相互 组 合 一 一 组 件 真 正 强 大 的 地 方 ， 组 件 间 
HRES. 








avalon2 正 是 遵循 这 些 规范 重新 设计 了 其 组 件 系 
ZF 


(1) 组 件 基于 ES6 import 或 common.js 构 建 ， 
每 个 组 件 都 有 自己 的 JS 文 件 、 模 板 文件 与 SASS 文 
件 ， 实 现 结构 行为 样式 分 离 。 当 然 如 采 模 板 太 小 ， 
只 有 一 行 也 可 以 放 进 JS 文 件 。 有 的 组 件 就 只 需要 默 
认 样 子 或 使 用 整体 引用 的 CSS 库 ， 那 也 可 以 略 去 
SASS 文 件 。 


(2) 组 件 是 一 个 独立 的 VM。 





(3) 使 用 时 ， 是 一 个 特殊 的 元 素 节 点 (针对 
IE6~IE8) 或 自 定义 标签 。 


(4) 组 件 的 柑 板 内 可 以 使 用 其 他 组 件 的 标签 
(强制 依赖 其 他 组 件 ) ， 或 者 在 使 用 组 件 时 ， 通 过 
slot 机 制 ， 在 里 面 引用 其 他 组 件 的 标签 (自由 使 用 
使 用 其 他 组 件 ) 。 比 如 说 弹出 层 ， 是 存在 确认 取消 











按钮 ， 那 么 它 是 强制 依赖 button 组 件 ， 但 它 的 内 部 
是 什么 是 ee 面板 、 拖 








(5) 组 件 都 有 相同 的 生命 周期 钩子 图 数 ， 


onInit、onReady、onViewChange、onDispose。 


下 面 是 一 个 button 组 件 的 定义 。 


avalon.component('ms-button', { 
template: '<button type="button"><span><slot /></span></but 
ton>', 
defaults: { 
buttonText: "button" 


}, 
soleSlot: 'buttonText' 


}) 





然后 便 用 时 是 这 样 用 的 。 


<ms-button> 你 好 <ms-button> 


最 后 在 负面 上 生成 这 样 的 结构 ， 如 图 16-2 所 


人 小。 
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图 16-2 





但 不 是 所 有 浏览 器 都 文 持 自 定 义 标签 ， 在 上 一 
章 中 ， 我 们 也 提出 了 一 个 解决 之 道 ， 但 还 有 更 好 的 
办 法 。 这 次 ， 我 们 引入 了 组 件 容 器 的 概念 。 为 了 兼 
容 正 6 一 下 8， 我 们 不 得 不 做 出 妥协 ， 不 只 有 自 定 义 
标签 可 以 成 为 组 件 ， 茶 些 特殊 元 系 也 可 以 成 为 组 


TF 


16.2.1 组 件 容器 





组 件 容 喜 是 一 个 占 位 用 的 元 素 节 点 ， 当 avalon 
扫 摘 到 此 位 置 上 时 将 它 丛 换 成 组 件 。 


在 avalon2 中 有 4 类 标签 可 以 用 作 组 件 容 器 ， 分 
别 是 wbr、xmp、template， 及 ms- 开 头 的 上 自 定 义 标 


Ws, O 


3 


其 兼容 性 如 表 16-1 所 示 。 


表 16-1 


























需要 使 用 ms-widget 来 指定 组 件 类 型 ， 里 面 可 以 使 用 
slot 属 性 元 素 














IE9+ 及 W3C 浏 览 器 ， 闭 ”| 需要 使 用 ms-widget 来 指定 组 件 类 型 ， 里 面 可 以 使 用 
合 标签 slot 属 性 元 素 


























可 以 省 略 ms-widget， 里 面 可 以 使 用 slot 属 性 元 素 





闭合 标签 ， 比 如 <div></div><a></a> 。 
自 闭 合 标 签 ， 比 如 <input><img><br><link> 。 


为 什么 要 选用 wbr、xmp、template 这 3 种 标签 
呢 ? xmp、template 我 们 在 节点 模块 的 容器 元 素 已 经 
解析 过 ， 它 们 在 内 部 只 是 一 个 文本 节点 或 没有 节 
点 ， 不 会 增加 DOM 树 的 整体 节点 数 ， 是 天 然 模 板 
容 右 。 而 wbr， 它 是 用 于 某 些 不 用 定义 内 容 的 组 
件 ， 它 纯粹 做 占 位 与 被 瞪 换 挥 。 





根据 表 16-1 所 示 ， 我 们 可 以 划分 它们 的 适用 场 
合 。 如 果 要 兼容 IE6 一 IE8， 那 么 只 能 使 用 wbr、xmp 
来 做 组 件 容器 ;如 采 不 打算 文 持 了 下， 那么 使 用 
template tA 5 H EXE. 








这 里 需要 说 明 一 下 ， 目 定义 标 丛 其 实在 耻 9 一 


IE11 中 也 不 被 支持 ， 甚 至 许多 浏览 器 也 不 支持 ， 它 
都 被 浏览 絮 当 成 一 种 HTMLUnknownElement 的 元 素 
实例 ， 它 有 许多 限制 。 首 先 它 是 闭合 标签 ， 不 能 

只 写 一 半 ， 其 次 它 不 文 持 ID， 无 法 被 

document .getElementById 索引 到 ， 最 后 它 也 不 文 

持 绑 定 动画 结束 事件 (如 onnimationend 与 


ontransitionend) 。 











自 定 义 标签 从 标签 名 可 以 很 好 地 声明 它 是 什么 
组 件 ， 可 以 xmp、template、wbr 需 要 使 用 其 他 属性 
标识 一 下 。 早 前 流行 的 polymer 库 是 用 is 属性 来 声 
明 ， 这 样 受众 面 比 较 广 ， 因 此 avalon2 也 借鉴 过 来 。 


因此 声明 一 个 button 组 件 ， 在 avalon 中 有 4 种 方 
Tue 
<xmp is="ms-button">t<4H</xmp> 


<template is="ms-button">#<4H</template> 
<wbr is="ms-button" /> 


<ms-button> 按 钮 </ms-button> 





全 于 目 定 义 标签 一 定 要 用 ms- 开头 呢 ? 这 其 实 
也 是 人 为 的 规定 。 有 人 句 话 说 得 好 ， 架 构 是 对 客观 不 
足 的 妥协 ， 规 范 是 对 主观 不 足 的 妥协 o FRAT 
工作 ， 基 本 上 就 是 不 停 地 在 各 种 各 样 的 允 盾 中 正确 
地 取舍 。 实 现 染 构 设 计 的 优雅 ， 与 特别 案 迫 的 需 
K, Hoe ThA), RARER ZS, TEREEIY IR 
做 一 些 忌 协 。 不 要 瑟 记 我 们 的 初衷 ， 一 切 为 业务 服 
务 ， 为 了 你 证 需求 被 实现 ， 我 们 允许 存在 一 些 瑕 
IE o 








| ATE6 ~IE8 4S 3c #9 AE Mas, RA] Ze S| 
进 组 件 容器 的 概念 ， 让 更 多 标签 可 以 转换 为 组 件 。 
为 了 防止 影响 所 有 上 自 定 义 标 签 〈 因 为 我 们 难免 使 用 
第 三 方 库 ， 假 如 它们 也 用 了 自 定义 标签 来 进行 某 种 
业务 操作 ， 这 就 有 互相 影响 之 大 〉 ， 我 们 要 有 选择 
地 对 某 些 前 级 的 自 定义 标签 进行 组 件 化 。 

















16.2.2 ”配置 对 象 


配置 对 象 是 解决 组 件 的 传 参 问 题 。 在 avalon2 
中 ， 定 通过 ms-widget 属 性 来 添加 额外 参数 。 在 
avalon2 的 组 件 定义 中 ， 己 经 有 一 个 defaults 配 置 对 
R, “ERE T AFRIT AS Sb. {ABT IEF iis 
一 律 ， 于 是 有 了 传 参 的 问题 。 由 于 组 件 已 经 标签 
化 ， 于 是 只 能 通过 属性 来 作为 传 参 ， 有 的 框架 规定 
目 定 义 标签 上 所 有 属性 ， 包 括 id 人 什么， 都 是 组 件 的 
传 参 ， 有 的 框架 则 规定 用 某 个 属性 来 传 进 所 有 用 到 
的 参数 ，avalon2 吏 是 后 者 。 这 优势 在 于 元 素 的 属性 
名 都 会 被 浏览 器 小 写 化 ， 使 用 第 一 种 风格 ， 你 无 法 
传 入 一 些 有 大 写字 母 的 属性 。 














<ms-datepicker :widget="{'number-of-months':3}" ></ms-datepicke 
r> 





16.2.3 slot#L i] 


配置 对 象 ， 只 能 添加 一 些 很 简短 的 属性 ， 但 如 
果 要 传 入 一 些 很 长 的 字符 串 就 不 美观 不 方便 了 。 妆 





然 我 们 也 可 以 将 它 先 定义 了 VM 中 的 一 个 属性 ， 然 
后 绸 在 widget 对 象 中 引用 ， 但 这 样 一 来 就 不 直观 。 
于 是 有 了 了 slot 机制 。slot 机 制 是 web components# yu 
发 明 的 ， 在 上 一 章 也 简单 介绍 了 它 。 





为 了 深入 理解 它 ， 我 们 需要 引入 更 多 概念 : 插 
Hue 与 插 卡 元 素 。 插 槽 元 素 是 用 占 位 与 蔡 换 ， 
插 卡 元 素 是 用 来 蔡 换 别人 的 。 更 直接 地 说 ， 插 权 元 
素 是 定义 在 template 中 ， 而 插 卡 元 素 是 定义 组 件 容 
颖 的 内 部 ， 是 用 户 传 参 的 一 部 分 。 


























我 们 看 一 下 ms-view 组 件 的 定义 与 使 用 。 


avalon.component('ms-view', 
template:"<div class="view"><slot name="content" /></div>", 
defaults: { 
content: "" 


} 


}) 
<div ms-controller='test'> 


<ms-view> 

<div slot="content"> 这 是 子 视图 的 内 容 </div> 
</ms-view> 

</div> 








这 上 面 的 &lt;slot name="content" /agt; Wè 


EIEI ，xxx 束 是 插 卡 元 系 。 


<div class="view"> 
<!--slot:content--> 
<!--slot-end: --> 


</div> 





组 件 容 器 中 带 slot 属 性 的 元 素 ，&l1t; div 
slot="content"&gt; 这 是 子 视 图 的 内 容 


&lt;/divagt; ， 就 是 插 卡 元 素 。 








想 想 你 的 电脑 主板 上 的 各 种 揪 槽 ， 有 插 CPU 
H, Amr F, AANER, AIER, Preh 
假设 有 个 组 件 是 computer， 其 模板 则 如 下 。 





<div class="computer"> 
<slot name="CPU"> 这 儿 插 你 的 CPU</slot> 
<slot name="GPU"> 这 儿 插 你 的 显卡 </slot> 
<slot name="Memory"> 这 儿 插 你 的 内 存 </slot> 














<slot name="Hard-drive"> 这 儿 插 你 的 硬盘 </slot> 
</div> 
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<ms -computer> 
<div slot="CPU">Intel Core i7</div> 
<div slot="GPU">GTX980Ti</div> 
<div slot="Memory">Kingston 32G</div> 


<div slot="Hard-drive">Samsung SSD 1T</divt> 
</ms -computer> 





IES, FER UR tH Ay he EE FE DRE o 


<ms -computer> 
<ms-cpu slot="CPU">Intel Core i7</ms-cpu> 
<ms-gpu slot="GPU">GTX980T1i</gpu> 
<ms-memory slot="Memory">Kingston 32G</ms-memory> 


<ms-ddr slot="Hard-drive">Samsung SSD 1T</ms-ddr> 
</ms-computer> 








Fea Lil) BY URRI NEA RKA ASS Ee 
多 个 slot 元 和 聚 拥有 同一 个 name 值 ， 如 网 16-3 所 示 。 














用 *[slot] 元 素 代替 
Slot 元素 
















<div class= “dialog” > 
<div class= “header” > 

<slot name= “header” ></slot> 
<div> 
<div class= “body” > 
<slot name= “body” ></slot> 
</div> 
<div class= “footer” > 
<slot name= “footer” ></slot> 
</div> 
</div> 


使 用 


















<div ms-controller= “test” > 
<ms-dialog> 

<span slot= “header”> 这 是 标题 </span> 

<div slot=“body”> 这 里 放 许 多 内 容 与 元 素 </div> 
<p slot=“foolter”><button> 关 闭 </button></p> 
</ms-dialog> 

</div> 











<div class= ‘ | i 
<span slot=“header”> 这 是 标题 </span> A 最 后 生成 的 结构 | 

</div> \ l 

<div class= “body” > 


<div slot=“body”> 这 里 放 许 多 内 容 与 元 素 </div> 
</div> 
<div class= “footer” > 
<p slot= “foolter” ><button>3 [4]</button></p> 
</div> 
</div> 
</div> 
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HA SCHL Be feel 或 匿名 插 槽 oe TL tl AY 


一 个 特例 。 


例如 我 们 做 一 个 按钮 组 件 。 





avalon.component('ms-button', { 

template: '<button type="button"><span><slot name="buttonTe 
xt" /></span></button>', 

defaults: { 


buttonText: "click me" 


那么 外 面 要 这 么 使 用 。 


<ms-button><b slot="buttonText"> 这 是 按钮 </b></ms-button> 





事实 上 我 们 只 想 传 入 一 个 文本 ， 不 想 再 包 一 个 
什么 b 元 素 ， 这 样 定 义 太 元 余 了 。 束 像 button 标 签 ， 
可 以 直接 这 样 写 。 


<button> 按 钮 </button> 


于 是 就 有 了 蛙 插 权 机 制 。 它 要 求 组 件 内 部 只 有 
一 个 地 方 可 以 插入 东西 ， 并 且 将 组 件 容 占 的 所 有 孩 
子 或 文本 都 作为 一 个 搬 卡 。 














我 们 看 一 下 新 的 定义 与 声明 方式 。 


avalon.component('ms-button', { 


template: '<button type="button"><span><slot /></span></but 
ton>', 
defaults: { 
buttonText: "click me" 
ty 
soleSlot: '‘buttonText' 


}) 


<ms-button>xxx</ms-button> 





是 不 是 简单 多 了 。 我 们 改正 一 下 compute 的 例 
子 。 


avalon.component('ms-button', { 
template: ‘<div class="computer"><slot /></div>', 
defaults: { 
configure: "各 种 配置 " 
ty 
soleSlot: 'configure' 


}) 


<ms -computer> 
<ms-cpu>Intel Core i7</ms-cpu> 
<ms - gou>GTX980T1i</gpu> 
<ms-memory>Kingston 32G</ms-memory> 
<ms-ddr>Samsung SSD 1T</ms-ddr> 
</ms-computer> 





16.2.5 生命 周期 


avalon2 组 件 拥 有 完善 的 生命 周期 钩子 ， 方 便 大 
家 做 各 种 操作 。 





onInit， 这 是 组 件 的 vm 创建 完毕 就 立即 调 用 
时 ， 它 对 应 的 元 素 节 点 或 虚拟 DOM 都 不 存在 。 只 
有 妆 这 个 组 件 里 面 不 存在 子 组 件 或 子 组 件 的 构造 器 
都 加 载 回来 时 ， 它 才 开 始 创建 其 虚拟 DOM， 人 否则 
原 位 置 上 被 一 个 注释 市 点 占 厦 。 








onReady， 当 其 虚拟 DOM 构 建 完毕 时 ， 它 束 生 
成 其 真实 DOM， 并 用 它 插入 到 DOM 树 ， 蔡 换 挥 那 
个 注释 节点 。 相 当 于 其 他 框架 的 attachedCallback、 


inserted. componentDidMount. 





onViewChange， 当 这 个 组 件 或 其 子孙 市 点 的 某 
些 属性 值 或 文本 内 容 发 生变 化 时 ， 束 会 触发 它 。 它 
比 Web Component 的 attributeChangedCallback 更 加 给 
Jie 











onDispose， 当 这 个 组 件 的 元 又 被 移出 DOM 树 
时 ， 吏 会 执行 此 回调 ， 它 会 移 除 相应 的 事件 ， 数 据 
与 vmodel。 


具体 用 法 ， 可 以 参看 这 里 。 


https://github.com/RubyLouvre/avalon/blob/2.1.6/perf/component/ 
%E 7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F . Html 





avalon2 的 组 件 化 方案 可 谓 是 现时 流行 的 组 件 标 
签 化 一 种 体现 与 退 随 。 


16.3 “React 的 组 件 方 案 





React 的 组 件 方 案 束 是 JSX， 它 会 目 动 帮 你 
React.createClass, React.createElement, 
React.Component...... 因此 不 用 JSX， 光 是 区 分 这 些 
Maas wit E. FFA TERA RAT, 
ReactHJ 21 (F077 Se LTE wold HF, I ae FES BG 
YO Bt SEE o 














16.3.1 React 组 件 的 各 种 定义 方 去 


1. React.createClass 


这 是 React 定 义 组 件 最 常见 的 方式 ， 创 建 React 
组 件 对 应 的 类 ， 摘 述 你 将 要 创建 组 件 的 各 种 行为 ， 
其 中 只 有 当 组 件 被 泻 染 时 需要 输出 的 内 容 的 render 
接口 是 必须 实现 的 ， 其 他 都 是 可 选 。 





var Timer = React.createClass({ 
render: function() { 
return <reactNode> <span>test</span> <span>test</span> </re 


actNode>; 


} 
}); 


ReactDOM.render(<Timer />, app); 





由 于 这 段 代 码 是 需要 经 过 编译 的 ， 
此 &1t;Timer/&gt; REFR EIH OOM WN eyes, aM 


需要 指定 displayName 属性 。 


React.createClass({ 
displayName: "MyComponent" 
render: function() { 
return <reactNode> <span>test</span> <span>test</span> </re 
actNode>; 


} 
}); 


ReactDOM.render(<MyComponent />, app); 





2. React.createElement 


创建 React 组 件 实例 《虚拟 DOM) ， 文 持 
type. props. children 3 个 参数 。 





ReactElement.createElement = function(type, props, children) { 
FF amas 


} 


Ce 
比如 上 面 的 <Mycomponent />, HJSX WÈ 


是 React .createElement (MyComponent ) o 


3. React.createFactory 
通过 工厂 方法 创建 React 组 件 实例 ， 在 JS 里 要 实 


现 工 三 方法 只 需 创建 一 个 市 type 参 数 的 
createElement 的 绑 定 函数 。 


ReactElement.createFactory = function(type) { 
var factory = ReactElement.createElement.bind(null, type); 
return factory; 


}; 











创建 便 式 的 目的 是 隔离 与 简化 创建 组 件 的 过 
程 ， 柑 式 的 东西 目 然 是 可 用 可 不 用 ， 如 果 和 需要 批量 
创建 菜 个 组 件 时 ， 可 以 通过 工厂 方法 来 实现 。 











var div = React.createFactory('div'); 
var root = div({ className: 'my-div' }); 
React.render(root, document.getElementById('example')); 








React.DOM.div. React.DOM.span 等 都 是 预先 
定义 好 的 “Factory”。“Factory” 用 于 创建 特定 
“ReactClass” f] “Element” - 


4. es6 Class Component 


从 React 0.13 开始 ， 可 以 使 用 ES6 Class 


Component {RẸ React.createClass 了 。 


class HelloMessage extends React.Component { 
render() { 
return <div>Hello {this.props.name}</div>; 


j 
} 





React.Component 是 基 类 ， 通 过 extends 来 创建 


它 的 一 个 子 类 。 


React.createClass 和 extends Component 的 区 别 主 
要 有 4 个 方面 。 


(1) RAK FI. 


(2) propType#ll getDefaultProps . 
(3) 状态 的 区 别 。 
(4) this 区 别 。 
1. 语法 区 别 
React.createClass 


import React from 'react'; 
const Contacts = React.createClass({ 
getInitialState: function(props){ 
return {count: props.initialCount} 
}, 
tick: function() { 
this.setState({count: this.state.count + 1}); 
}, 
render() { 
return ( 
<div></div> 


export default Contacts; 





2. React.Component 


import React from 'react'; 


class Contacts extends React.Component { 
//constructor 方 法 是 可 选 的 ，React ,createCclass 中 的 某 些 工作 ， 可 以 直接 在 
ES6 Class 的 构造 函数 中 来 // 完 成 ， 例 如 : getInitialState 的 工作 可 以 被 构造 
函数 所 蔡 代 
constructor(props) { 
super (props); 
this.state = {count: props.initialCount}; 








} 
tick() { 
this.setState({count: this.state.count + 1}); 


} 
render() { 
return ( 
<div></div> 


); 


export default Contacts; 





3. propType#l getDefaultProps 


React.createClass: 通过 proTypes 对 象 和 
getDefaultProps() 方 法 来 设置 和 获取 props。 





import React from 'react'; 


const Contacts = React.createClass({ 
propTypes: { 
name: React.PropTypes.string 
ty 
getDefaultProps() { 
return { 


J}; 
ty 
render() { 


return ( 
<div></div> 


); 


export default Contacts; 





React.Component: 设置 两 个 属性 propTypes 和 
defaultProps. 


import React form 'react'; 
class TodoItem extends React.Component{ 
static propTypes = { // as static property 
name: React.PropTypes.string 
}; 
static defaultProps = { // as static property 
name: '' 
}; 
constructor(props) { 
super (props) 


} 
render (){ 
return <div></div> 


} 





4. 状态 的 区 列 


React.createClass: 通过 getInitialState(O) 方 法 返 
回 一 个 包含 初始 值 的 对 象 。 


React.Component: 通过 constructor 设 置 一 个 


state 对 象 。 
5. this 区 别 


React.createClass: 会 正确 绑 定 this。 


import React from 'react'; 


const Contacts = React.createClass({ 
handleClick() { 
console.log(this); // React Component instance 


ty 
render() { 
return ( 


<div onClick={this.handleclick}></div>// 会 切换 到 正确 的 this 上 














export default Contacts; 





React.Component: 由 于 使 用 了 ES6， 这 里 会 有 
些微 不 同 ， 属 性 并 不 会 自动 绑 定 到 React 类 的 实例 
eae 





import React from 'react'; 
class TodoItem extends React.Component{ 
constructor(props) { 


super(props); 


handleClick(){ 
console.log(this); // null 


} 
handleFocus(){ // manually bind this 
console.log(this); // React Component Instance 


handleBlur: ()=>{ // use arrow function 
console.log(this); // React Component Instance 


render (){ 
return <input onClick={this.handleClick} 
onFocus={this.handleFocus.bind(th 


onBlur={this.handleBlur }/> 





当然 ， 我 们 可 以 在 组 件 初 始 化 时 ， 直 接 对 其 所 
有 事件 回调 进行 支持 ， 强 制 bind(this)。 





import React from 'react'; 


class Contacts extends React.Component { 
constructor(props) { 
super(props); 
Object.getOwnPropertyNames(this). 
forEach(function(name) { 
if(typeof this[name] === 'function'){ 
this[name] = this[name].bind(this) 


} 
}, this) 


} 
handleClick() { 
console.log(this); // React Component instance 


render() { 


return ( 
<div onClick={this.handleClick}></div> 


export default Contacts; 





6. Stateless Function Components 


到 了 React 0.14， 又 提倡 这 种 新 的 组 件 方式 ， 
不 过 夹 在 它们 中 间 还 有 一 种 叫 Pure Components 。 


import React, { PureComponent } from 'react' 


class Text extends PureComponent { 
render() { 
return <p>{this.props.children}</p>; 


} 


} 





Mi Stateless Components 束 是 去 挥 extends 与 
constructor 的 Pure Component， 也 叫 Stateless 
Function。 可 见 目 从 React 引 进 了 ES6 后 ， 致 力 于 创 
建 更 短 竣 有 力 的 组 件 声明 方式 。 


const Text = (props) => 





<p>{props.children}</p> 


或 者 改 成 ES5 风 格 。 


var Text = function (props) { 
return <div>{props.children}</div> 


i 








这 种 无 状态 函数 式 组 件 的 写法 也 是 文 持 设置 默 
认 的 Props 类 型 与 值 的 。 


const Text = ({ children }) => 

<p>{children}</p> 
Text.propTypes = { children: React.PropTypes.string }; 
Text.defaultProps = { children: 'Hello World!' }; 





我 们 也 可 以 利用 ES6 默 认 函 数 参 数 的 方式 来 设 
AAE. 


const Text = ({ children = 'Hello World!' }) => 
<p>{children}</p> 





图 数 式 组 件 中 并 不 需要 进行 生命 周期 的 管理 与 
状态 管理 ， 因 此 React 并 不 需要 进行 某 些 特 定 的 检查 
或 者 内 存 分 配 ， 从 而 保证 了 更 好 地 性 能 表现 。 


7. Higher Order Components 


随 看 React 组 件 被 函数 化 ， 那 么 它 束 可 以 使 用 
函数 式 编程 里 的 某 些 东西 ， 比 如 高 阶 函 数 ， 于 是 产 
高 阶 函 数 是 返回 一 个 新 的 函数 ， 而 
高 阶 组 件 是 返回 一 个 新 的 组 件 。 








const connect = (mapStateFromStore) => (WrappedComponent) => { 
class InnerComponent extends Component { 


static contextTypes = { 
store: T.object 


} 


state = { 
others: {} 


componentDidMount () { 
const { store } = this.context 
this.unSubscribe = store.subscribe(() => { 
this.setState({ others: mapStateFromStore(store.getStat 
e()) } 
}) 
} 


componentWillUnmount () { 
this.unSubscribe() 


} 


render () { 
const { others } = this.state 
const props = { 
..this.props, 
..others 


return <WrappedComponent {...props} /> 


} 


return InnerComponent 





它们 的 结构 大 部 是 这 样 的 。 


config => { 
return Component=> { 
return HighOrderCompoent 





通过 高 阶 组 件 来 创建 新 组 件 比 通过 继承 创建 子 
其 


组 件 ， 其 维护 性 更 好 ， 这 也 和 是 编程 界 的 共识 《组 合 
优 于 继承 ) 。 但 高 价 组 件 是 社区 及 展 的 产物 ， 没 有 
统一 创建 方 采 ， 因 此 存在 一 些 隐 患 。 


https://segmentfault .com/a/1190000004034179 





Pt 


大 致 介绍 了 这 么 多 创建 组 件 的 方式 后 ， 大 家 可 
ECAR ARAL, DASH, Reacthe— Sat 
配 ”* 啊 。JSX 已 经 特 立 独行 ， 还 市 来 这 一 个 奇怪 的 组 
件 形式 。 





16.3.2 ”React 组 件 的 生命 周期 


React 组 件 拥 有 丰 蛙 的 生命 周期 钩子 图 数 ， 过 
布 它 的 各 个 阶段 。 其 生命 周期 可 被 分 为 挂 载 
(Mounting) ~ sr (Updating) PIENK 
(UnMounting) 3 个 阶段 。 


1. 挂 载 阶段 
这 是 React 组 件 生 命 周期 的 第 一 个 阶段 ， 也 可 
以 称 为 组 件 出 生 阶 段 ， 这 个 阶段 组 件 被 初始 化 ， 获 


得 初始 的 props 并 定义 将 会 用 到 的 state。 此 阶段 结 
时 ， 组 件 及 其 子 元 素 都 会 在 UI 中 被 演 染 (DOM， 








UIview 等 ) ， 我 们 还 可 以 对 演 染 后 的 组 件 进 行进 一 
步 的 加 工 。 这 个 阶段 的 所 有 方法 在 组 件 生命 中 只 会 
被 触发 一 次 。 


Žž. 











getDefaultPropos: 只 调用 一 次 ， 实 力 之 间 共 享 
引用 。 
getInitialState: 初始 化 每 个 实例 特有 的 状态 。 
componentWillMount: render 之 前 最 后 一 次 修改 
状态 的 机 会 。 

render: 只 能 访问 this.props 和 this.state， 只 有 一 
个 项 层 组 件 ， 不 允许 修改 状态 和 DOM 输 出 。 
componentDidMount: 成 功 render 并 演 染 完成 真 
实 DOM 后 触发 ， 可 以 修改 DOM。 


更 新 阶段 
ene 数 会 在 组 件 的 整个 生命 周期 中 不 


汤 被 触发 ， 这 是 组 件 一 生 中 最 长 的 时 期 。 这 个 阶段 
的 函数 可 以 获得 新 的 props， 可 以 更 改 state， 可 以 对 


HP YAS Bak AT AR o 


componentWillReceiveProps: 父 组 件 修 改 属 性 触 
发 ， 可 以 修改 新 属性 ， 修 改 状态 。 
shouldComponentUpdate: 人 返回 false 会 阻止 render 
调用 。 

componentWillUpeate: 不 能 修改 属性 和 状态 。 
render: 只 能 访问 this.props 和 this.state， 只 有 一 个 
顶层 组 件 ， 不 允许 修改 状态 和 DOM 输 出 。 
componentDidUpdate: 可 LŽ DOM. 


- EU GT Be 


这 是 组 件 生命 的 最 后 一 个 阶段 ， 也 可 以 被 称 为 








征 组 件 的 死亡 阶段 ， 此 阶段 对 应 组 件 从 Native UI 中 
到 载 之 时 ， 具 体 说 来 可 能 是 用 户 切 换 了 页 面 ， 或 者 
页 面 改变 去 除了 攻 个 组 件 ， 凶 载 阶段 的 函数 只 会 被 
触 友 一 次 ， 然 后 该 组 件 就 会 被 加 入 浏览 占 的 垃圾 回 
收 机 制 。 





e componentWillUnMount: 在 删除 组 件 之 前 进行 
清理 操作 ， 比 如 计时 器 和 事件 监 昕 器 〈( 见 图 16- 
4) 。 


getDefaultProps 


componentWillUnmount 





16.3.3 “React 组 件 间 通信 


React 推 有 录 数 据 单 加 流动， 都 是 从 父 组 件 流 回 
子 组 件 。 经 过 大 家 的 不 懈 努 力 ， 把 各 种 关系 的 组 件 
通信 方式 总 结 出 来 。 


父 组 件 -> 子 组 件 : props. 
子 组 件 -> 父 组 件 : callback. 


子 组 件 -> 子 组 件 : 子 组 件 通 过 回调 改变 父 组 件 
中 的 状态 ， 通 过 props 再 修改 另 一 个 组 件 的 状态 。 





父子 组 件 间 通信 


//CalendarControlSSCalendarHeader 
var CalendarControl = React.createClass({ 
getDefaultProps: function () { 
var newDate = new Date(); 
return { 
year: util.formatDate(newDate, 'yyyy'), 
month: parseInt(util.formatDate(newDate, 'MM')), 
day: parseInt(util.formatDate(newDate, 'dd')) 





1 


ty 
render: function () { 
return ( 
<div> 
<CalendarHeader year="this.props.year" month="t 
his.props.month" day="this. props.day"/> 


</div> 





2. 子 父 组 件 间 通信 


var CalendarControl = React.createClass({ 
getInitialState: function () { 
var newDate = new Date(); 
return { 
year: util.formatDate(newDate, 'yyyy'), 
month: parseInt(util.formatDate(newDate, 'MM')), 
day: parseInt(util.formatDate(newDate, 'dd')) 





}; 


ty 
// 给 子 组 件 一 个 回调 函数 ， 用 来 更 新 父 组 件 的 状态 ， 然 后 影响 另 一 个 组 件 
handleFilterUpdate: function (filterYear, filterMonth) { 
this.setState({ 
year: filteryYear, 
month: filterMonth 
}); 
ty 


render: function () { 
return ( 
<div> 
<CalendarHeader updateFilter={this.handleFilter 
Update}/> 
</div> 


}); 


var CalendarHeader = React.createClass({ 
getInitialState: function () { 
var newDate = new Date(); 
return { 
year: util.formatDate(newDate, 'yyyy' ),// 设 置 默 认 年 为 


month: parseInt(util.formatDate(newDate, 'MM'),))// 设 


置 默认 日 为 今天 





For 


handleLeftClick: function () { 
var newMonth 


= parseInt(this.state.month) - 1; 
var year = this.state.year; 
if (newMonth < 1) { 
year --; 
newMonth = 


12; 
this.state.month = newMonth; 
this.state.year = year; 
this.setSstate(this.state);// 在 设置 了 state 之 后 需要 调用 setSta 
te 方法 来 修改 状态 值 ， 

// 每 次 修改 之 后 都 会 自动 调用 this .render 方 法 ， 再 次 泻 染 组 件 











this.props.updateFilter(year, 


var newMonth 


newMonth) ; 
了 
handleRightClick: function () { 
= parseInt(this.state.month) + 1; 
var year = this.state.year; 
if (newMonth > 12) { 
year++; 


newMonth = 


Í 


this.state.month = newMonth; 
this.state.year = year; 


this.setState(this.state);// 在 设置 了 state 之 后 需要 调用 setSta 
te 方法 来 修改 状态 值 ， 
父 组 件 通 信 


1; 








i= 








// 每 次 修改 之 后 都 会 自动 调用 this.render 方 法 ， 再 次 泻 染 组 件 ， 以 此 向 
bat 


this.props.updateFilter(year,newMonth); 


render: function () { 
return ( 


<div className="headerborder"> 
<p>{this.state.month} 


H </p> 
<p>{this.state. year}‘F</p> 
leLeftClick}> </p> 


<p className="triangle-left" onClick={this.hand 
dleRightClick}> </p> 


<p className="triangle-right" onClick={this.han 
</div> 





}); 


3. 兄 第 组 件 间 通 信 


var CalendarControl = React.createClass({ 
getInitialState: function () { 
var newDate = new Date(); 
return { 
year: util.formatDate(newDate, 'yyyy'), 
month: parseInt(util.formatDate(newDate, 'MM')), 
day: parseInt(util.formatDate(newDate, 'dd')) 


}; 


ty 
// 给 子 组 件 一 个 回调 函数 ， 用 来 更 新 父 组 件 的 状态 ， 然 后 影响 另 一 个 组 件 
handleFilterUpdate: function (filterYear, filterMonth) { 
this.setState({ 
year: filterYear, 
month: filterMonth 
¥) /7 刷新 父 组 件 状态 


ty 
render: function () { 
return ( 
<div> 
<CalendarHeader updateFilter={this.handleFilter 
Update}/> 
<CalendarBody 
year={this.state. year} 
month={this.state.month} 
day={this.state.day} 
/>// 父 组 件 状 态 被 另 一 个 子 组 件 刷新 后 ， 这 个 子 组 件 就 会 被 刷新 


</div> 





4. Flux 


a 
信也 能 找到 最 近 的 共同 组 件 进行 传递 ， 但 性 能 是 个 
id u 。 这 时 就 要 介绍 subpub 模 式 的 EventBus 了 。 
Fackbook 目 家 的 解决 方案 是 Flux。Flux 应 用 主要 分 
为 4 个 主要 的 部 分 : Views. Actions, Dispatcher, 
Stores 〈 见 图 16-5 和 表 16-2) 。 


Action 


Dispatcher Store View 








Action 


图 16-5 


表 16-2 








ES 可 以 看 成 是 修改 Store 的 行为 抽 


着 应 用 的 数据 流 ， 可 以 看 为 Action 到 Store 的 分 发 器 


pets 
BE A 









































Dispatcher 





























整个 应 用 的 状态 和 逻辑 ， 类 似 MVC 中 的 Model 








有 关 Flux 的 其 他 介绍 上 自己 用 百度 或 谷歌 查找 。 
由 于 Facebook 只 是 给 出 Flux 的 架构 图 与 接口 ， 人 至 于 
怎么 实现 ， 它 目 家 搞 了 好 久 ， 因 此 存在 众多 实现 问 
题 。 在 这 些 混乱 中 ， 最 终 被 Redux 超 越 了 。 


5. Redux 


按照 Redux 官 方 的 摘 述 Redux is a predictable 

state container for JavaScript apps.， 其 中 predictable 
和 state container 体 现 了 它 的 作用 。 那 么 如 何 来 理解 
可 预测 化 的 呢 ? 这 里 会 有 一 些 函 数 式 编程 方面 的 思 
想 ， 在 Redux 中 reducer 函 数 是 一 个 纯 函 数 ， 相 同 输 
入 一 定 会 是 一 致 的 输出， 所 以 确定 输入 的 state 那 么 
reducer 函 数 输出 的 state 一 定 是 可 以 被 预测 的 ， 因 为 
它 只 会 进行 单纯 的 计算 ， 保 证 正确 的 输出 。 状 态 容 
器 又 是 什么 ? 它 是 说 明 Redux 有 一 个 专门 管理 state 
的 地 方 ， 吏 是 Store， 并 且 一 般 情 况 下 是 唯一 的 ， 应 











用 中 所 有 state 形 成 的 一 里 状态 树 就 是 Store。Redux 
由 Flux 演 变 而 来 ， 但 受 Elm 的 启发 ， 吉 开 了 Flux 的 
复杂 性 ， 我 们 看 看 其 数据 流 问 ， 如 图 16-6 所 示 。 


















Store(Redux) 


图 16-6 


不 同 于 Flux 架 构 ，Redux 中 没有 dispatcher 这 个 
概念 ， 并 且 Redux 设 想 你 永远 不 会 变动 你 的 数据 ， 
你 应 该 在 reducer 中 返回 新 的 对 象 来 作为 应 用 的 新 状 
态 。 但 是 它们 都 可 以 用 (state, action) => newState 来 
表述 其 核心 思想 ， 所 以 Redux 可 以 被 看 成 是 Flux 思 
想 的 一 种 实现 ， 但 是 在 细节 上 会 有 一 些 差 异 。 








如 果 从 MVVM 的 角度 来 看 ，React 是 一 个 纯净 
的 视图 库 ， 解 决 的 是 组 件 内 部 或 者 继承 关系 的 组 件 


状态 管理 。 每 个 组 件 都 没有 上 自己 的 VM， 操 作 数 据 
需要 调用 其 方法 ， 与 jQuery 时 代 别 无 二 致 。 但 是 有 
了 Redux， 它 将 所 有 组 件 的 state 组 合 起 来 管理 ， 同 
时 指挥 这 么 多 组 件 的 变化 ， 其 实 相 当 于 一 个 页 面 级 








的 巨大 VM。 于 是 基于 此 理论 ， 也 有 人 设计 出 基于 
mobx， 如 图 16-7 上 所 示 。 





反应 式 的 Redux 





图 16-7 
16.3.4 ”React 组 件 的 分 类 


React 由 于 太 特 立 独行 ， 并 且 由 于 它 能 解决 移 
动 开 发 的 痛 点 ， 于 是 发 展 出 目 己 一 套 完整 的 生态 
闭 。 束 像 深 海中 的 鲸 沙 ， 市 给 我 们 无 数 的 惊喜 。 想 








理解 它们 ， 以 旧 有 的 术语 来 描述 它们 ， 只 能 带 给 学 
习 者 一 些 错误 的 印象 ,因此 最 后 奉 上 一 些 有 趣 的 划 
分 ， 以 维 读者 。 








在 地 表 之 上 ， 万 物 生 长 依靠 太阳 。 但 哪 介 是 最 
清澈 的 海水 ， 在 200 米 以 下 也 几乎 是 漆黑 一 片 。 没 
有 阳光 ， 驱 动 生 物 界 运行 的 最 主要 有 的 能 量 来 源 晰 
绝 ， 但 是 并 非 没 有 其 他 途 符 。 深 海 海 奔 的 生物 可 以 
依 徘 化 能 合成 和 海面 输送 来 的 物质 ， 热 果 口 是 它们 
的 城市 ， 详 流 是 它们 的 道路 ， 从 海面 绥 慢 球 下 来 的 
BRS (“海洋 雪 ”) 是 它们 的 天 降 甘 条， 而 侦 然 
洲 下 的 巨大 号 绒 ， 则 是 它们 在 大 洋 充 济 之 中 的 孤岛 
FUER. TREE HK A FE RNA AS, BRAY tig 
Y&” (Whale fall) 。 














1. Aas {PA RANE 


名 字 来 源 于 redux 作 者 Dan Abramov 的 博客 


《Presentational and Container Components》 。 


如 果 你 将 组 件 分 成 两 类 ， 你 会 友 现 它们 容易 更 
被 重用 和 理解 ， 这 两 关 称 之 为 容 需 组 件 和 展示 组 
(F 。 笔 者 也 听 过 其 他 说 法 ， 比 如 "及 肿 的 "和 "苗条 
的 ",，" 智 能 的 "和 "单调 的 "，" 多 状态 变量 "和 "单纯 
Hy", "HRA A CE Se BN SEE BL, AVA 
一 样 的 中 心思 想 。 





展示 组 件 的 特点 如 下 。 


只 关注 于 如 何 展示 。 

可 能 同时 包含 子 级 容器 组 件 和 展示 组 件 ， 一 般 
含 DOM 标 签 和 自 定 的 样式 。 

通常 用 this.props.children 来 包含 其 他 组 件 。 

不 依赖 app 其 它 组 件 ， 比 如 flux 的 actions 和 
stores 。 

不 会 定义 数据 如 何 读 取 ， 如 何 改变 。 

只 通过 this.props 接 受 数 据 和 回调 函数 。 

很 少 有 目 己 的 状态 变量 ， 即 使 有 ， 也 是 UI 的 状 




















态 变量 ， 比 如 toggleMenuOpen、Input Focus. 
。 除非 他 们 需要 的 目 己 的 状态 ， 生 命 周 期 ， 或 性 
能 优化 才 会 被 与 为 功能 组 件 。 
。 例子 有 Page、Sidebar、Story、UserInfo、List。 


a ZAP 的 特点 如 下 。 


。 只 关心 它们 的 运作 方式 。 

。 可 能 同时 包含 子 级 容器 组 件 和 展示 组 件 ， 但 大 
都 不 售 DOM 标 签 ， 而 含 他 们 自己 所 用 的 
wrapping div， 从 不 用 目 己 的 样式 。 

。 为 展示 组 件 或 其 他 组 件 提供 数据 和 方法 。 

。 调 用 Flux 的 actions， 并 且 将 其 作为 展示 组 件 的 回 
调 函 数 。 维 持 许 多 状态 变量 ， 通 第 充当 一 个 数 
HEW o 

。 通 钊 由 高 阶 组 件 生 成 ， 比 如 Redux 里 的 
connect()，Relay 里 的 createContainer()，Flux 
Utils 里 的 Container.create()， 而 非 手 工 写 出 








( 注 ， 可 能 在 meteor 中 数据 是 例外 吧 ) 。 
。 例子 有 UserPage、FollowersSidebar、 


StoryContainer、 FollowedUserList. 
2. 智能 组 件 与 木偶 组 件 


名 字 来 源 于 《使 用 React 重 构 百 度 新 闻 webapp 
前 端 》， 可 能 也 是 容器 组 件 与 展示 组 件 的 一 种 叫 
VE. 


http: //wangfupeng.coding.me/share/2016/08/06/restruct -bdnews -we 
bapp-by-react.html 


原文 从 如 何 设计 一 个 新 闻 webapp 引 申 这 些 概 
念 。 首 先 将 系统 划分 成 各 和 干 个 页 面 ， 然 后 将 每 个 页 
面 都 划分 成 若干 个 组 件 ， 还 要 抽象 出 多 个 页 面 中 都 
会 用 到 的 通用 组 件 。 根 据 这 些 组 件 的 里 粒度 与 对 数 
据 的 占有 情况 划分 为 两 种 。 








智能 组 件 ， 它 是 数据 的 所 有 者 ， 它 拥有 数据 ， 





且 拥 有 操作 数据 的 action， 但 是 它 不 实现 任何 有 具体 
功能 。 它 会 将 数据 和 操作 action 传 递 给 子 组 件 ， 让 
子 组 件 来 完成 UI 或 者 功能 。 这 束 是 智能 组 件 ， 也 就 
是 项 目 中 的 各 个 页 面 。 





木偶 组 件 : 它 就 是 一 个 工具 ， 不 拥有 任何 数 
据 、 及 操作 数据 的 action， 给 它 什 么 数据 它 就 显示 
什么 数据 ， 给 它 什 么 方法 ， 它 就 调用 什么 方法 ， 比 
较 盆 。 这 就 是 木偶 组 件 ， 即 项 目 中 的 各 个 组 件 ， 如 
图 16-8 所 示 。 








HU Yarn EA HH 
将 一 个 页 面 划分 多 个 切换 卡 《“ 子 页 面 ) ， 然 后 


根据 地 址 栏 进行 切换 ， 这 束 是 前 闯 路 由 的 由 来 。 前 
组 件 ， 是 目前 我 们 实现 


16.4 








sig BR HEE To A AS As 
SAP 的 重要 技术 之 一 。Backbone、angular、 
avalon、vVvue 等 都 有 目 己 的 路 由 组 件 。 


以 avalon 组 路 由 为 例 ， 分 为 3 部 分 。 








e storage: 保存 当前 的 路 址 。 
e mmHistory: 监听 地 址 栏 变化 或 回 退 按钮 ， 得 到 


当前 感 兴趣 的 路 径 ， 放 到 mmRouter 里 进行 匹 


配 。 
e mmRouter: 定义 与 解析 路 由 规则 ， 及 绑 定 对 应 


的 回调 。 
这 里 有 几 个 术语 。 


路 址 ， 是 指 地 址 栏 中 的 hash《〈 在 JavaScript 语 
言 里 称 url 改 变 该 部 分 不 会 影 啊 页 面 重新 加 载 的 部 分 
为 hash， 在 后 台 语 言 里 称 之 为 fragment) 或 
pathname 〈 域 名 后 面 的 部 分 ) 。 这 是 客观 存在 的 地 
址 栏 的 一 部 分 ， 用 于 匹配 路 由 规则 。 路 址 必须 以 / 开 
头 ， 以 便 在 hash 模 式 下 区 分 真正 的 销 点 。 











路 由 规则 : 地 址 的 抽象 形式 ， 一 个 地 址 必然 
匹配 荣 种 套路 。 比 如 
https://segmentfault .com/a/1190000004862711 
， 罗 配 /a/:d 规 
Wl, http://localhost/index.html#/topic IL 
Ac/topic 规则 。 路 由 规则 也 必须 以 /开头 ， 全 少 大 
多 数 路 由 伏 都 遭 循 这 个 设计 。 几 乎 所 有 路 由 项 ， 都 
会 将 路 由 规则 转换 为 一 个 正则 。 然 后 正则 与 它 对 应 
的 回调 组 成 一 个 对 象 ， 进 入 一 个 数组 中 。 当 地 址 过 
RK, WET, MP SAT ele! 这 个 方案 目 
imiy HA ae BEE DOR, ARE PEAR. HHK A H 














规则 转换 为 正则 都 有 已 成 的 库 了 。 


https://github.com/pillarjs/path-to-regexp 


avalon HH tH hi 1H A By 2 zy SR ic 
址 ， 但 支持 的 路 由 规则 形式 太 少 了 ， 最 终 也 放弃 
J 


https://github.com/RubyLouvre/mmRouter/blob/0.2/avalon.router.js 


路 由 参数 : 路 由 规则 有 林 林 种 种 的 定义 方 
式 ， 但 无 不 例外 ， 它 们 都 文 持 规则 有 一 部 分 是 可 变 
的 。 不 存在 变动 部 分 的 叫 静 态 路 由 ， 人 否则 称 动态 路 
由 ， 大 部 分 路 由 规则 都 是 动态 路 由 。 动 态 的 那 部 分 
称 之 为 路 由 参数 。 现 在 流行 两 种 定义 路 由 参数 的 风 
格 ， 一 是 使 用 {} ， 二 是 使 用 :。 如 /blog/{name} 
或 /blog/:name'。 基 本 上 路 由 参数 都 位 于 /的 后 面 ， 
这 是 因为 大 多 数 地 址 都 是 体 循 RESTful Web API 风 








格 设计 的 。Backbone 就 是 使 用 冒号 风格 ， 而 angular 
ui-router 与 avalon 路 由 是 两 种 风格 都 支持 。 





路 由 参数 也 分 3 种 类 型 。 


必用 参数 : 换言之 ， 可 变 部 分 不 能 省 略 。 
如 /blog/{name} 或 /blog/:name 。 


可 选 参数 : 如 条 地 址 栏 少 了 可 变 部 分 的 ， 也 
能 认为 由 配 ， 这 时 可 能 使 用 默认 参数 项 ， 通 过 在 后 
面 加 ? 或 * 来 标识 。 这 些 符号 都 是 来 自 正 则 的 元 字 
符 ， 方 便 转 换 。 如 /blLog/fname?1 或 /blog/:name 


2 











正则 参数 : 当 你 的 路 由 参数 以 化 括号 风格 定 
义 ， 它 看 起 来 像 一 个 对 象 ， 这 时 可 能 用 骨气 隔 开 ， 
前 面 是 参数 名 ， 后 面 是 一 个 正则 。 要 求 动态 也 必须 


` 


FAIS IEMA BELA. WM/blog/{name: \d+$} 








16.4.1 storage 


这 个 用 来 保持 地 址 栏 ， 防 止 页 面 不 小 心 被 刷 
新 ， 寻 致 路 由 器 无 法 还 原 当 前 页 面 。 由 于 保持 的 东 
POSE TS AAA, me BAB, KEE E A THI o 
基本 上 用 浏览 器 的 两 种 对 象 来 实现 ， 优 先 考虑 
localStorage， 其 次 是 cookie。 如 果 想 大 而 全 的 方 
案 ， 可 以 参考 下 面 的 连接 。 





https://github.com/nbubna/store 
function supportLocalStorage() { 
try {// 看 是 否 支 持 localStorage 
localStorage.setItem("avalon", 1) 
localStorage.removeItem("avalon" ) 
return true 
} catch (e) { 


return false 
} 
} 
function escapeCookie(value) { 
return String(value).replace(/[,;"\\=\s%]/g, function (char 
acter) { 
return encodeURIComponent (character ) 


}); 


var ret = {} 
if (supportLocalStorage()) { 
ret.getLastPath = function () { 
return localStorage.getItem('msLastPath' ) 


var cookieID 
ret.setLastPath = function (path) { 
if (cookieID) { 


clearTimeout (cookieID) 
cookieID = null 
} 
localStorage.setItem("msLastPath", path) 
cookieID = setTimeout(function () {// 模 拟 过 期 时 间 
localStorage.removitem("msLastPath" ) 
}, 1000 * 60 * 60 * 24) 


} 
} else { 


ret.getLastPath = function () { 
return getCookie.getItem( 'msLastPath' ) 


ret.setLastPath = function (path) { 
setCookie('msLastPath', path) 
} 


function setCookie(key, value) { 
var date = new Date()// 将 date 设 置 为 1 天 以 后 的 时 间 
date.setTime(date.getTime() + 1000 * 60 * 60 * 24) 
document.cookie = escapeCookie(key) + '=' + escapeCooki 

e(value) + ';expires=' + date.toGMTString() 

} 

function getCookie(name) { 
var m = String(document.cookie).match(new RegExp('(?:4| 

) + name + '(?:(?:= (L467 1") 1718)" )) 11 ["", ""] 

return decodeURIComponent(m[1] ) 

} 


} 


module.exports = ret 





16.4.2 mmHistory 


mmHistory 的 目的 是 实现 window.history 的 功 
能 。 在 浏览 器 中 ，history 对 象 包含 用 户 已 经 浏览 的 
URL 人 信息， 这 就 是 我 们 传说 中 的 历史 记录 。 我 们 可 











以 通过 点 击 前 进 后 退 按钮 ， 重复 观看 之 前 的 页面 。 
并 且 history 对 象 也 有 forward/back 两 个 方法 ， 以 编程 
手段 切换 页 面 。 当 SPA 流 行 后 ， 要 在 一 个 页 面 模拟 
多 个 页 面 的 效果 ， 也 需要 用 到 history。 





我 们 在 上 节 提 到 ，mmHistory 是 用 来 监听 地 址 
栏 被 改动 的 。 其 实 它 也 能 目 动 修改 地 址 栏 ， 但 要 求 
修改 后 ， 页 面 不 能 被 整体 刷新 。 目 前 而 言 ， 只 有 两 
种 方式 可 以 实现 : 修改 ljocation.hash 与 通过 
pushState、replaceState API。 修 改 地 址 栏 的 操作 主 
要 用 于 用 户 点 击 A 标 签 时 ， 我 们 会 动 持 页 面 上 的 所 
有 点 击 事 件 ， 然 后 判定 其 事件 源 ， 如 果 是 A 标签 并 
且 符 合 一 系列 要 求 ， 我 们 融会 手动 地 址 栏 ， 并 执行 
对 应 的 回调 操作 。 











此 mmHistory 有 3 大 任务 。 


。 监 听 地 址 栏 变 化 。 
。 动 持 扣 击 事件 。 


。 主动 修改 地 址 栏 。 


监听 地 址 栏 变 化 根据 浏览 器 的 支持 情况 也 分 3 
种 。 


。 使 用 window.onpopstateg 事 件 进 行 监听 history。 
当 用 户 调用 了 history.go 和 history.back 方 法 ， 或 
用 户 按 浏览 右 历 史前 进 后 退 按钮 ， 都 会 触发 
popstate 事 件 。 事 件 发 生 时 浏览 器 会 从 history 中 
取出 URL 和 对 应 的 state 对 象 蔡 换 当 前 的 URL 和 
history.state。 通 过 event.state 也 可 以 获取 


history.state 。 


需要 注意 的 是 调用 history.pushState0) 或 
history.replaceState() 不 会 触发 popstate 事 件 。 因 此 当 
我 们 主动 用 pushState 修 改 地 址 栏 时 ， 需 要 手动 
window.onpopstate() 触 友 回调 。 


pushState() 与 replaceState() 的 差别 是 ， 它 


们 通常 对 应 旧 的 location.assign() 
、1location.replace() ， 如 网 16-9 所 示 。 


pushState 





replaceState 


图 16-9 


。 使 用 onhashchange 事 件 监 听 URE 的 hash 变 化 ， 这 
个 是 从 下 8 开始 文 持 。 H EH location. hash 
= XXX 或 location.href = XXXX 时 ， 只 要 改动 的 地 方 
只 发 生 在 井 后 面 就 不 会 引发 整 页 刷新 ， 此 事件 
就 会 执行 。 同 时 ，history.go 和 history.back 方 法 








也 会 引发 此 事件 。 

。JIE6、JIE7 中 使 用 onpropertychange 监 听 
document.location 属 性 变动 。 其 他 浏览 器 可 以 使 
用 interval 轮 询 。 公 于 如 何 产 生 历 史 ， 束 使 用 
iframe hack， 这 个 在 jQuery.fn.hashchange 等 库 中 

CZ HOR ST 





下 面 我 们 解 谈 一 下 源码 ， 里 面 有 许多 链接 ， 集 
中 了 前 人 的 心血 。mmHistory 基 本 参考 backbone. 
History， 主 要 方法 有 start、stop、setHash、 
onHashChange。 先 看 start。 








var mmHistory = { 
hash: getHash(location.href), 
start: function (options) { 
if (this.started) 
throw new Error('avalon.history has already been st 


arted' ) 


this.started = true 
// 监 听 模 式 
if (typeof options === 'boolean') { 

options = { 

html5: options 

} 
} 
options = avalon.mix({}, defaults, options || {}) 
var rootPath = options.root 
var html5Mode = options.htm1l5 


this.options = options 
this.mode = html5Mode ? "popstate" : "hashchange" 
if (!supportPushState) { 
if (html5Mode) { 
avalon.warn(" 浏 览 器 不 支持 HTML5 pushState， 平 稳 退 化 
4llonhashchange!") 
} 


this.mode = "hashchange" 


if (!supportHashChange) { 
this.mode = "iframepoll" 


avalon.log('avalon run mmHistory in the ', this.mode, ' 
mode' ) 
// 文 持 popstate 就 监听 popstate 
// 支持 hashchange 就 监听 hashchange(IE8、IE9、FF3) 
// 否则 的 话 只 能 每 隔 一 段 时 间 进 行 检 测 了 (IE6、IE7 ) 
switch (this.mode) { 
case "popstate" : 

// 此 事件 在 古老 的 chrome 事 件 有 bug， 会 在 页 面 加 载 后 就 自动 
触发 ， 我 们 需要 延迟 绑 定 此 事件 
http://code.google.com/p/chromium/issues/detail?id=63040 

setTimeout(function () { 

window.onpopstate = mmHistory.onHashChanged 
}, 500) 
break 
case "hashchange": 
window.onhashchange = mmHistory.onHashChanged 
break 
case "iframepoll": 
// 也 有 人 这 样 使 用 http://www.cnblogs.com/meteoric_cry/a 
rchive/2011/01/11/1933164.html 
avalon.ready(function () { 
var iframe = document.createElement('iframe 






































') 

iframe.id = options.iframeID 

iframe.style.display = 'none' 

document .body.appendChild(iframe) 

mmHistory.iframe = iframe 

mmHistory.writeFrame('') 

if (avalon.msie) { 

function onPropertyChange() { 
if (event.propertyName === 'locatio 

n ) { 


mmHistory.check() 


I 
} 


document.attachEvent('onpropertychange' 
, onPropertyChange) 
mmHistory.onPropertyChange = onProperty 
Change 
} 


mmHistory.intervalID = window.setInterval(f 
unction () { 
mmHistory.check() 
}, options.interval) 


}) 


break 


} 
// 页 面 加 载 时 触发 onHashChanged 
this.onHashChanged() 


ty 
stop: function () { 


setHash: function (s, replace) { 
//... 
ty 


writeFrame: function (s) { 


getPath: function () { 

//... 

ty 

onHashChanged: function (hash, onClick) { 
//... 


} 





轮 询 模 式 下 ， 需 要 通过 check 方 法 来 调用 


onHashChanged()， 目 的 只 是 做 一 个 小 小 的 检测 。 


mmHistory. check = function () { 
var h = getHash(location.href) 
if (h !== this.hash) { 
this.hash = h 
this .onHashChanged( ) 





getHash 方 法 是 对 原生 location.hash 的 不 信任 搞 
出 来 的 方法 ， 这 里 实现 太 多 兼容 性 问题 了 。 


function getHash(path) { 
// IE6 直 接 用 location.hash 取 hash， 可 能 会 取 少 一 部 分 内 容 
比如 http://www.cnblogs.com/rubylouvre#stream/xxxxx?lang= 


IE6 => location.hash = #stream/xxxxx 
其 他 浏览 器 => location.hash = #stream/xxxxx?lang=zh_c 
Firefox 会 自作 多 情 对 hash 进 行 decodeURIComponent 
又 比如 http://www.cnblogs.com/rubylouvre/#!/home/q={%22th 
edate%22 :%2220121010~ 
// 20121010%22} 
// Firefox 15 => #!/home/q={"thedate":"20121010~20121010"} 





// 其 他 浏览 器 => #!/home/q={%22thedate%22 :%2220121010~2012101 
Q%22} 
var index = path.indexOf("#") 
if (index === -1) { 
return '' 


return decodeURI(path.slice(index) ) 





onHashChanged 是 用 于 与 mmRouter 打 交道 的 桥 
梁 。 它 存在 两 种 模式 ， 一 种 是 点 击 模式 ， 锌 页 面 的 
A 标签 被 点 击 ， 那 么 就 会 将 其 href 属性 加 工 一 下 ， 
传 进 此 方法 。 另 一 种 是 事件 模式 ， 这 时 它 的 第 一 
参数 是 事件 对 象 或 没有 对 象 (E6, IE7) ， 需 要 从 
地 址 栏 中 获取 hash。 




















mmHistory.onHashChanged = function (hash, clickMode) { 

if (!clickMode) { 

hash = mmHistory.mode === 'popstate' ? mmHistory.ge 
tPath() : 
location.href.replace(/.*#!?/, '') 

} 

hash = decodeURIComponent (hash) 

hash = hash.charAt(0) === '/' ? hash : '/' + hash 

if (hash !== mmHistory.hash) { 

mmHistory.hash = hash 


if (avalon.router) {//8JmmRouter 
hash = avalon.router.navigate(hash, 0) 


} 


if (clickMode) { 
mmHistory.setHash(hash) 


} 
if (clickMode && mmHistory.options.autoScroll) { 
autoScroll(hash.slice(1) ) 





由 于 点 击 模式 下 ， 事 件 的 默认 行为 被 阻止 了 ， 
因此 我 们 需要 手动 修改 地 址 栏 〈 也 残 是 里 面 的 
setHash 方 法 ) ， 此 外 ， 有 时 我 们 需要 将 页 面 深 动 条 
下 滑 到 与 铺 点 同名 的 元 素 里 ， 也 是 在 这 个 方法 里 
做 。 








setHash: function (s, replace) { 
switch (this.mode) { 
case 'iframepoll': 
if (replace) { 
var iframe = this.iframe 
if (iframe) { 

















//contentWindow 兼容 各 个 浏览 器 ， 可 取得 子 窗口 的 window 对 象 。 
//contentDocument Firefox 支持 ，> IE8 的 IE 支 持 。 可 取得 子 窗口 的 docum 
ent 对 象 。 








iframe.contentWindow. hash = s 


} 
} else { 
this.writeFrame(s) 
} 
break 
case 'popstate': 
var path = (this.options.root + '/' + s).replace(/ 
\/+/g, '/') 
var method = replace ? 'replaceState': 'pushState' 
history[method]({}, document.title, path) 
// 手动 触发 onpopstate event 
this.onHashChanged() 
break 
default: 
//http://stackoverflow.com/questions/9235304/how-t 
o-replace-the-location 
//-hash-and-only-keep-the-last-history-entry 
var newHash = this.options.hashPrefix + s 
if (replace && location.hash !== newHash) { 
history.back() 
} 


location.hash = newHash 
break 





stop 方 法 比较 简单 ， 略 过 。 我 们 看 一 下 如 何 劫 








持 所 有 点 击 事件 ， 与 其 内 部 复杂 的 过 涯 条 件 。 笔 者 
参考 了 许多 库 弄 成 现在 的 样子 。 











// 动 持 页 面 上 所 有 点 击 事件 ， 如 果 事 件 源 来 自 链接 或 其 内 部 ， 
// 并 且 它 不 会 跳出 本 页 ， 并 且 以 "#/" 或 "#1/" 开 类 ， 那么 触发 updateLocation 方 法 
avalon.bind(document, "click", function (e) { 

//https://github.com/asual/jquery-address/blob/master/src/j 
query.address.js 

//https://github.com/angular/angular .js/blob/master/src/ng/ 
location.js 

// 下 面 儿 种 情况 将 阻止 进入 路 由 系列 

//1. 路 由 器 没有 启动 

if (!mmHistory.started) { 

return 





ot 






































} 
//2， 不 是 左 键 点 击 或 使 用 组 合 键 
if (e.ctrlKey || e.metakey || e.shiftKey || e.which === 2 | 
| e.button === 2) { 
return 





} 

//3， 此 事件 已 经 被 阻止 

if (e.returnValue === false) { 
return 











} 
//4. 目标 元 素 不 A 标签 ,或 不 在 A 标签 之 内 
var el = e.path ? e.path[0] : e.target 
while (el.nodeName !== "A") { 
el = el.parentNode 
if (!el || el.tagName === "BODY") { 
return 
} 


} 
//5. 没有 定义 href 属 性 或 在 hash 模 式 下 , 只 有 一 个 # 
//IE6/IE7 直 接 用 getAttribute 返 回 完整 路 径 
var href = el.getAttribute('href', 2) || el.getAttribute("x 
link:href") || '' 
if (href.slice(0, 2) !== '#!') { 
return 














} 


//6. 目标 链接 是 用 于 下 载 资源 或 指向 外 部 
if (el.hasAttribute('download') || el.getAttribute('rel') = 
== 'external') 
return 





//7， 只 是 邮箱 地 址 
if (href.indexOf('mailto:') > -1) { 
return 








} 

//8. 目标 链接 要 新 开 窗 口 

if (el.target && el.target !== '_self') { 
return 


} 


e.preventDefault() 
// 终 于 达到 目的 地 
mmHistory.onHashChanged(href.replace('#!', ''), true) 


}) 





最 后 看 autoScroll 方 法 ， 这 主要 参考 angular 1 的 
同名 模块 。 








// 得 到 页 面 第 一 个 符合 条 件 的 A 标签 
function getFirstAnchor(name) { 
var list = document.getElementsByTagName('A') 
for (var i = 0, el; el = list[i++]; ) { 
if (el.name === name) { 
return el 








} 


} 
} 
function getOffset(elem) { 
var position = avalon(elem).css('position'), offset 


if (position !== 'fixed') { 
offset = 0 
} else { 


offset = elem.getBoundingClientRect().bottom 
} 


return offset 


和 


function autoScroll(hash) { 
// 取 得 页 面 拥有 相同 ID 的 元 素 
var elem = document .getElementById(hash) 
if (!elem) { 
// 取 得 页 面 拥有 相同 name 的 A 元 素 
elem = getFirstAnchor (hash) 























} 
if (elem) { 
elem.scrollIntoView( ) 
var offset = getOffset(elem) 
if (offset) { 
var elemTop = elem.getBoundingClientRect().top 
window.scrollBy(0, elemTop - offset.top) 
} 
} else { 
window.scrollTo(0, 0) 


J 








最 后 用 angular 的 $location 服 务 示 意图 ， 表 示 这 
两 种 模式 〈iframepoll 也 是 hashchange 的 一 种 补充 ) 
的 操作 原理 ， 如 图 16-10 所 示 。 


HTMLS Mode 


Regular URL: http://foo.com/bar?baz=23#baz, 


— O 


—— $location.path) ——  $location.search() ——— $location.hash() 一 一 


Hashbang URL: http://foo.com/#!/bar? baz=23#baz 


Hashbang Mode 
(HTMLS Fallback Mode) 


图 16-10 
16.4.3 mmRouter 


mmRouter 主 要 难点 是 转换 路 由 规则 为 正则 ， 
为 简 音 起见， 直接 用 github 上 的 path-to-regexp 。 





var mmHistory = require('./mmHistory' ) 
var storage = require('./storage' ) 
var pathToRegexp = require('path-to-regexp' ) 
function Router() { 
this.rules = [] 


} 
Router.prototype = storage 
avalon.mix(storage, { 
error: function (callback) { 
this.errorback = callback 
ty 
add: function(){ 


ty 


route: function(){ 


ty 


navigate: function(){ 


} 


module.exports = avalon.router = new Router 








首先 error 方 法 就 是 添加 一 个 404 回 调 ， 当 一 个 
地 址 与 我 们 定义 好 的 所 有 路 由 规则 都 不 匹配 时 ， 整 
执行 它 。 它 相当 于 React 的 NotFoundRoute。 


接着 是 添加 路 由 规则 的 方法 ， 它 会 转换 第 一 


参数 为 一 个 正则 。 





Router.prototype.add = function(path, callback, opts){ 

var array = this.rules 

if (path.charAt(0) !== "/") { 
avalon.error("avalon.router.add 的 第 一 个 参数 必须 以 /开头 ") 


/") { 


} 

opts = opts || {} 

opts.callback = callback 

if (path.length > 2 && path.charAt(path.length - 1) === " 


path = patni slice(0, -1) 

opts.last = "/" 
} 
var keys = [] 
var regexp = pathToRegexp('/foo/:bar', keys) 
opts.keys = keys 
opts.regexp = regexp 
avalon.Array.ensure(array, opts) 


a 


route 用 来 判定 当前 URE 与 已 有 状态 对 象 的 路 由 
规则 是 否 符合 ， 这 是 在 mmHistory 里 面 调用 的 重要 








Router.prototype.route = function (path, query) { 
path = path.trim() 
var rules = this.rules 
for (var i= 0, el; el = rules[it++]; ) { 
var args = path.match(el.regexp) 
if (args) { 
el.query = query || {} 
el.path = path 
el.params = {} 
var keys = el.keys 
args.shift() 
if (keys.length) { 
_parseArgs(args, el) 
} 
return el.callback.apply(el, args) 
} 


} 
if (this.errorback) {//404 


this.errorback() 
} 
} 
function _parseArgs(match, stateObj) { 
var keys = stateObj.keys 
for (var j = 0, jn = keys.length; j < jn; j++) { 
var key = keys[j] 
var value = match[j] |] '' 
match[j] = stateObj.params[key.name] = value 





navigate 方 法 让 你 手动 切换 于 页 面 并 执行 它 的 
方法 。 


Router.prototype.navigate = function (hash, mode) { 
var parsed = parseQuery(hash) 
var newHash = this.route(parsed.path, parsed. query) 
if (isLegalPath(newHash) ){ 
hash = newHash 





} 

// 保 存 到 本 地 储存 或 cookie 
avalon.router.setLastPath(hash) 
// 模式 0， 不 改变 URL， 不 产生 历史 实体 ， 执行 回调 
// 模式 1， 改 变 URL， 不 产生 历史 实体 ， ”执行 回调 





// 模式 2， 改 变 URL， 产 生 历 史实 体 ， 执行 回调 

if (mode === 1) { 
avalon.history.setHash(hash, true) 

} else if (mode === 2) { 
avalon.history.setHash(hash) 


Í 


return hash 





基本 上 这 就 说 完了 。 


路 由 右 是 一 个 称 得 上 框架 的 必 备 组 件 ， 实 现 
各 种 资源 整合 的 财 环 。 人 否则 用 户 引 入 其 他 JS 生态 图 
的 路 由 左 ， 会 让 框架 完整 性 大 打折 扣 。 





至 此 ， 本 书 完 毕 。 相 对 上 一 版 ， 内 容 改 动 较 
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恨 ， 也 可 能 是 面临 全 新 的 难题 应 运 而 生 的 产物 。 需 
要 学 习 的 东西 太 多 ， 根 本 学 不 过 来 。 因 此 必须 有 和 目 
CAAT IR), ANSEF”. AAA, BARE 
WERE Ro IRE TARY A A EAH E BH 

的 ， 比 如 说 所 有 面向 对 象 语言 ， 都 是 基于 面向 对 象 
思想 和 原则 ， 比 如 说 设计 方 双 和 框架 模式 ， 虱 可 以 
参考 前 过 们 归纳 出 的 各 种 设计 模式 。 如 来 精通 一 

门 ， 必 势能 举一反三 ， 触 类 劳 门 其 他 相似 的 技术 。 
因此 在 新 的 一 版 中 ， 部 会 对 条 项 技术 进行 精 讲 ， 然 
后 册 给 出 更 多 参照 用 的 不 同 解 法 ， 来 拓展 大 家 的 思 
路 。 























最 后 ， 重 申 一 下 笔者 开 及 框架 的 三 大 原则 。 


(1) 复杂 即 错误 。 无 论 是 从 开发 到 维护 ， 都 
EWH. KIER, UAE Toe, BEAT TAO, Bk 
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(2) 数据 结构 优 于 算法 。 参 见 React 的 虚拟 
DOM 实 现 ，dift 算 法 很 美 ， 但 前 提 是 依仗 其 巧妙 设 
计 的 虚拟 DOM 树 。 为 了 减轻 算法 的 复杂 度 ， 又 引 
进 了 key 属 性 。 








(3) 出奇制胜 。 已 有 的 生态 太 强 大 ， 做 第 二 
个 jQuery 的 意义 不 大 ， 必 须 引 进 其 履 式 创新 ， 升 维 
思考 ， 降 维 打击 ， 改 变 旧 有 的 格局 。 
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式 ， 它 可 能 与 本 模块 有 关 。 现 在 是 开 迹 的 时 候 ， 不 
知 聪明 的 你 猪 到 没有 ? 




















桥接 模式 
与 特征 侦 测 单 例 模式 
























































数据 缓存 模块 记事 本 备忘录 模式 


样式 模块 





PC 端的 事件 系统 


移动 端的 事件 系统 
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装饰 器 模式 
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解释 器 模式 














[ 具 webpack 





状态 模式 





欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn ) 是 人 民 邮 电 出 版 
社 旗下 IT 专业 图 书 旗舰 社区 ， 于 2015 年 8 月 上 线 运 
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业 优 质 出 版 资源 和 编辑 策划 团队 ， 打 造 传统 出 版 与 
电子 出 版 和 自 出 版 结合 、 纸 质 书 与 电子 书 结合 、 传 
统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平 台 ， 拥 供 最 新 
技术 资讯 ， 为 作者 和 读者 打造 交流 互动 的 平台 。 
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免费 电子 书 


- Free eBook 





我 要 写 书 


Write for Us 
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Python St mimaa Oe 。 机 珀 池 习 罗 导 开发 二 关 。 区 村 斯 因 轩 :1 秆 坦 
Rien ows nite tt 的 Python 学 习 半 这 其 活动 


AX BAA ITS ? 


购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 全 技术 ， 在 编程 语 
言 、Web 搁 术 、 数 据 科 学 等 领域 有 众多 经 典 畅销 图 
书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 400 多 
种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 
会 定期 及 布 新 书 书 讯 。 





社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 
程序 源 代码 。 





为 外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 
注册 成 为 社区 用 户 融 可 以 免费 下 载 。 


与 作 详 痢 互 动 





很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 
他 们 ， 咨 询 技术 问题 ， 可 以 阅读 不 断 更 新 的 技术 文 
革 ， 咏 作 详 者 和 编辑 畅 聊 好 书 背 后 有 趣 的 故事 ， 还 
可 以 参与 社区 的 作者 访谈 栏目 ， 疝 您 关注 的 作者 所 
出 采访 题目 。 


灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 
纸 质 图 书 直 接 从 人 民 邮 电 出 版 社 书库 发 贷 ， 电 子 书 
提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首 发 服 
务 ， 用 户 可 以 第 一 时 间 买 到 心仪 的 新 书 。 

用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 
积分 数值 ， 即 可 扣 减 相应 金额 。 


特别 优惠 








购买 本 电子 书 的 读者 专 享 异 步 社区 优惠 券 。 使 用 方法 : 注册 成 为 
社区 用 户 ， 在 下 单 购书 时 输入 “57AWG ”， 然 后 点 击 “ 使 用 优惠 码 ”， 即 
可 至 受 电 子 书 8 折 优 惠 (本 优惠 券 只 可 使 用 一 次 )。 





纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购 买方 
陈 ， 价 格 优 惠 ， 一 次 购买 ， 多 种 阅读 选择 。 
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Wireshark 网 终 分 析 的 艺术 
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AEX HRY WABUT A ? 


提交 勘误 





您 可 以 在 图 书页 面 下 方 提 区 勘误 ， 每 条 勘误 被 
确认 后 可 以 获得 100 积 分 。 热 心 勘误 的 读者 还 有 机 
会 参与 书稿 的 审 校 和 翻译 工作 。 
iE 

社区 提供 基于 Markdown 的 写作 环境 ， 嘉 欢 写 
作 的 您 可 以 在 此 一 试 导 手 ， 在 社区 里 分 享 您 的 技术 


心得 和 读书 体会 ， 更 可 以 体验 目 出 版 的 乐趣 ， 轻 松 
实现 出 版 的 梦想 。 











如 果 成 为 社区 认证 作 译 者 ， 还 可 以 圣 受 寞 步 社 
区 提供 的 作者 专 圣 特色 服务 。 











会 议 活动 早 知 道 


E SRITRNKAa MN, BAHL 


费 获 赠 大 会 门票 。 





DARL 


扫描 任意 二 维 码 都 能 找到 我 们 : 








微 信服 务 号 





微 博 


官方 





QQ 和 群 : 436746675 


社区 网 址 : www.epubit.com.cn 


官方 微 信 : 异步 社区 


官方 微 博 : @ 人 邮 异 步 社 区 ，@ 人 民 邮 电 出 版 
社 -信息 技 术 分 社 


fx Ain Sc ZF Vi]: ”contact@epubit.com.cn 


